angular ui error: $modal.open is not a function

Question

I'm trying to get a modal to appear using Angular-UI v0.10.0 (http://angular-ui.github.io/bootstrap/) and Angular 1.1.5 and I receive the following error:

Error: $modal.open is not a function

I'm not sure or why I'm getting this error. Here's what I have...

HTML:

    <div ng-controller="ModalDemoCtrl">
        <button class="btn btn-default btn-sm" ng-click="open()">open me</button>
    </div>

JS:

app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'template.html',
            controller: 'ModalInstanceCtrl', 
            resolve: {}
        });
    };
}]);

app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

I'm just trying to get the basics down first...like getting it to open. I've pretty much exhausted me resources, so any help would be greatly appreciated! Thanks!

Answer 1

I fixed the problem.

Apparently, I had angular-strap beneath angular-ui, which was overwriting the angular-ui. Both scripts were obviously in conflict with one another.

The app I'm working on is complicated, so this was easy to overlook. However, word of advice, stick with one library and keep things simple.

Thanks everyone!

Answer 2

This error cause by including $modal unsuccess.

Make sure:

1. add source link between your angular.js & yourapp.js

   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
   <script src="assets/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
   <script src="assets/js/yourapp.js"></script>
   

2. add ui.bootstrap to the module

   app = angular.module('yourApp', ['ui.bootstrap']); 
   

3. add $modal independency to your controller

   app.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {}]);