error when injecting $modal in angular - html

Question

I am trying to open a modal popup based on some condition. However i am getting the below error
Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal
at Error (<anonymous>)
Below is my Code: "ui.bootstrap" is included in the app.
angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal) {
$scope.selectRow = function (position) {
$scope.changed = false;
if ($scope.select !== undefined && $scope.selectedRow !== position){
$scope.changed = true;
$scope.open();
}
$scope.select = position;
};
$scope.open = function () {
console.log('Opening modal');
var modalInstance = {
templateUrl: 'modal.html',
dialogClass: 'modal-selection',
controller: ModalInstanceCtrl
};
$modal.open(modalInstance);
};
var ModalInstanceCtrl = function ($modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
});
My HTML:
<div id="modal-select" >
<h3>
Choose appropriate change
</h3>
<div>
<ul>
<li>Change 1</li>
<li>Change 2</li>
<li>Change 3</li>
<li>Change 4</li>
</ul>
</div>
<div>
<button class="button" ng-click="cancel()">
Cancel
</button>
<button class="button" ng-click="ok()">
Done
</button>
</div>
</div>

Answer 1

From the Angular website:
This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example
Do you have 'ui.bootstrap' as a dependency to your current module?
angular.module('myApp').controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal)
Should be:
angular.module('myApp', ['ui.bootstrap']).controller('myController', function ($scope, $timeout, $location, $window, $log, $rootScope, $modal)

Answer 2

The error was because i had ui.bootstrap 0.5.0. I updated to 0.6.0 and rebuild the application to include this and the issue was fixed.

Answer 3

I solve this problem, by simply append the $modal.open({... to $scope.modalInstance variable.
(function () {
var app = angular.module('app');
app.controller('ModalCtrl', [
'$scope', '$modal', function ($scope, $modal) {
$scope.modalInstance = {};
$scope.open = function () {
$scope.modalInstance = $modal.open({
templateUrl: 'Template id goes here',
controller: 'ModalInstanceCtrl'
});
};
}
]); })();
The 'ModalInstanceCtrl'
(function () {
var app = angular.module('app');
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.submit = function (myForm) {
//submit code goes here
};
$scope.cancel = function () {
$modalInstance.close();
};
}
); })();