javascript - Modal in one function cannot be accessed from another function -

i'm new angular , i'm trying angularjs modal work. displays fine when click button cancel button inside modal not work.

myapp.controller("servicecontroller", function($scope, $http, $modal) {     var modalinstance;     $scope.select = function(id) {         this.modalinstance = $modal.open({             animation: $scope.animationsenabled,             templateurl: 'mymodalcontent.html',             controller: 'servicecontroller',         });          console.log(this.modalinstance);     };      $scope.cancel = function() {         console.log(this.modalinstance); <--- null         this.modalinstance.dismiss('cancel');     }; }); 

the error occurs in cancel function modalinstance variable null.

can please explain why null, though select method assigns modal instance it.

this html code looks like:

<script type="text/ng-template" id="mymodalcontent.html">     <div class="modal-header">         <h3 class="modal-title">update line</h3>     </div>     <div class="modal-body">         <input class="form-control" ng-model="client.name"/>     </div>     <div class="modal-footer">         <button class="btn btn-primary">update</button>         <button class="btn btn-warning" ng-click="cancel()">cancel</button>     </div> </script> 

thanks

the approach recommended on angular boostrap site use separate controller modal. helps modularize code keep different functionalities separate. try this:

myapp.controller("servicecontroller", function($scope, $http, $modal) {     $scope.select = function(id) {         var modalinstance = $modal.open({             animation: $scope.animationsenabled,             templateurl: 'mymodalcontent.html',             controller: 'modalcontroller',         });          console.log(modalinstance);     }; });  myapp.controller('modalcontroller', function ($scope, $modalinstance, items) {    $scope.cancel = function () {     console.log(modalinstance);     $modalinstance.dismiss('cancel');   }; });