Angular Error - ReferenceError: $modal is not defined

Question

I am using code form a tutorial and modifying it a bit. I have run into an issue with the edit feature. I keep getting a "ReferenceError: $modal is not defined" here is my code.

postCtrl:

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.filter('dateToISO', function() {
  return function(input) {
    input = new Date(input).toISOString();
    return input;
  };
});
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data) {
    Data.get('posts').then(function(data){
        $scope.posts = data.data;
        $scope.currentPage = 1; //current page
        $scope.filteredItems = $scope.posts.length; //Initially for no filter  
        $scope.totalItems = $scope.posts.length;
        $scope.list_pages = [
                {
                    id: '5',
                    name: '5'
                }, {
                    id: '10',
                    name: '10'
                }, {
                    id: '20',
                    name: '20'
                }, {
                    id: '50',
                    name: '50'
                }, {
                    id: '100',
                    name: '100'
                }
            ];
        $scope.maxSize = 5;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
    $scope.changePostStatus = function(post){
        post.approved = (post.approved=="1" ? "0" : "1");
        Data.put("posts/"+post.id,{approved:post.approved});
    };
    $scope.changePostAnnounce = function(post){
        post.announce = (post.announce=="1" ? "0" : "1");
        Data.put("posts/"+post.id,{announce:post.announce});
    };

    $scope.trashPost = function(post){
        //$log.log(post);
        if(confirm("Are you sure to remove the post")){
            Data.delete("posts/"+post.id).then(function(result){
                $scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));
            });
        }
    };
    $scope.open = function (p,size) {
        var modalInstance = $modal.open({
          templateUrl: 'views/postsEdit.html',
          controller: 'postsEditCtrl',
          size: size,
          resolve: {
            item: function () {
              return p;
            }
          }
        });
        modalInstance.result.then(function(selectedObject) {
            if(selectedObject.save == "insert"){
                $scope.posts.push(selectedObject);
                $scope.posts = $filter('orderBy')($scope.posts, 'id', 'reverse');
            }else if(selectedObject.save == "update"){
                p.description = selectedObject.description;
                p.price = selectedObject.price;
                p.stock = selectedObject.stock;
                p.packing = selectedObject.packing;
            }
        });
    };

});

app.controller('postsEditCtrl', function ($scope, $modalInstance, item, Data) {

  $scope.post = angular.copy(item);

        $scope.cancel = function () {
            $modalInstance.dismiss('Close');
        };
        $scope.title = (item.id > 0) ? 'Edit Post' : 'Add Post';
        $scope.buttonText = (item.id > 0) ? 'Update Post' : 'Add New Post';

        var original = item;
        $scope.isClean = function() {
            return angular.equals(original, $scope.post);
        }
        $scope.saveProduct = function (post) {
            post.uid = $scope.uid;
            if(post.id > 0){
                Data.put('posts/'+post.id, post).then(function (result) {
                    if(result.status != 'error'){
                        var x = angular.copy(post);
                        x.save = 'update';
                        $modalInstance.close(x);
                    }else{
                        console.log(result);
                    }
                });
            }else{
                post.status = 'Active';
                Data.post('posts', post).then(function (result) {
                    if(result.status != 'error'){
                        var x = angular.copy(post);
                        x.save = 'insert';
                        x.id = result.data;
                        $modalInstance.close(x);
                    }else{
                        console.log(result);
                    }
                });
            }
        };
});

html:

<div class="container">
    <div class="row" align="center">
        <div class="stats"><i class="fa fa-thumb-tack"></i> Total Posts (<span class="attendStat">{{ totalItems }}</span>)<span class="seperator">&nbsp;&nbsp;|&nbsp;&nbsp;</span><i class="fa fa-trash-o"></i> <a href="#" id="trashCan" class="trashCan">Trash</a> (<span class="attendStat">X</span>)</div>
    </div>
    <div class="row">
        <div class="col-md-1">PageSize:
            <select ng-model="entryLimit" class="form-control" ng-options="obj.id as obj.name for obj in list_pages" ng-init="entryLimit='10'">
            </select>
        </div>
        <div class="col-md-5"><span class="">Filtered: {{ filtered.length }} of {{ totalItems }} total posts</span>
            <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
        </div>
        <div class="col-md-4 pull-right text-right" ng-show="filteredItems > 0">
            <uib-pagination total-items="filteredItems" items-per-page="entryLimit" boundary-link-numbers="true" max-size="maxSize" ng-model="currentPage" class="pagination-sm"></uib-pagination>        
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="table-responsive" ng-show="filteredItems > 0">
            <table class="table table-striped table-bordered">
            <thead>
            <th>Publish Date&nbsp;<a ng-click="sort_by('publishdate');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>GUID&nbsp;<a ng-click="sort_by('guid');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Platform&nbsp;<a ng-click="sort_by('platform');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Link Title&nbsp;<a ng-click="sort_by('title');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Redirect Url (Base)&nbsp;<a ng-click="sort_by('redirect');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Announce&nbsp;<a ng-click="sort_by('announce');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Approve&nbsp;<a ng-click="sort_by('approve');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th></th>
            </thead>
            <tbody ng-repeat="data in filtered = (posts | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <tr>
                    <td class="posts-publishdate">{{data.publishdate | dateToISO | date:'MMM d, y h:mm a' }}</td>
                    <td>{{data.guid}}</td>
                    <td>{{data.platform}}</td>
                    <td>{{data.title}}</td>
                    <td>{{data.redirect}}</td>
                    <td>
                        <button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.announce]" ng-click="changePostAnnounce(data);">{{data.announce == '1' ? "Active" : "Inactive"}}</button>
                    </td>
                    <td>
                        <button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.approved]" ng-click="changePostStatus(data);">{{data.approved == '1' ? "Active" : "Inactive"}}</button>
                    </td>
                    <td style="width:100px">
                        <div class="btn-group">
                          <button type="button" class="btn btn-default fa fa-edit" ng-click="open(data);"></button>
                          <button type="button" class="btn btn-danger fa fa-trash-o" ng-click="trashPost(data);"></button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="8">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <th>Image Url&nbsp;<a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Link Description&nbsp;<a ng-click="sort_by('description');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Tweet&nbsp;<a ng-click="sort_by('dynamic_content');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><img src="{{data.img}}" width="200"></td>
                                    <td>{{data.description}}</td>
                                    <td>{{data.dynamic_content}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>

                </tr>
            </tbody>
            </table>
        </div>
        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No customers found</h4>
            </div>
        </div>
    </div>
</div>

Any help would be much appreciated.

Answer 1

You missed to inject $modal dependency inside postsCtrl controller

app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data, $modal) {

Make sure you have injected particular dependency before getting access to it. Assuming you have already added ui.bootstrap module dependency too.

---

UPDATE

If you are using latest version of angular ui bootstrap which is 0.14.X would need to inject $uibModal instead of $modal. As they rename all boostrap directive and serviec name prepends with uib prefix.

Same thing will happen with $modalInstance dependency, which need to change to $uibModalInstance