Binding restriction does not work in modal popups

Question

I use angular to bind data to my user interface, which works fine. But when a modal popup is called up when a button is clicked, binding in modal mode does not work.

<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">{{checkItem}}</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button ng-click="saveClient()" class="btn btn-primary pull-right btn-tabkey"><i class="fa fa-save"></i>Save</button>&nbsp;&nbsp; <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="focusInput=false"><i class="fa fa-ban"></i>Cancel</button> </div> </div> <!-- /.modal-content --> </div> 

Angular:

 angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) { $scope.checkItem = ""; $scope.loadEditForm = function () { $scope.checkItem = "yes"; $("#modal-form-edit").modal(); }; }]); 

Answer 1

It looks like you are opening a modal using a simple jQuery approach. This will not work in Angular because the open modal is not connected to the Angular application, so it does not know that the modal needs to be processed, HTML is parsed, etc.

Instead, you must use directives correctly, or in the case of a modal dialog, you can simply use existing ones, for example, the Angular UI project, which brings ready-made Bootstrap directives for Angular. In your case, you will need the $modal service.

Use would then be very simple:

 // remember to add ui.bootstrap module dependency angular.module('myModule', ['ui.bootstrap']); angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", "dataService", function ($rootScope, $scope, $filter, $modal, dataService) { $scope.checkItem = ""; $scope.loadEditForm = function () { $scope.checkItem = "yes"; $modal.open({ templateUrl: 'modal.html', controller: 'modalController', scope: $scope }); }; }]); 

Demo: http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

Answer 2

You need to assign ng-controller in the div tag of the modal dialog.

 <div class="modal-dialog" **ng-controller="myController"**> . . . . . 

Update

I think you got this error below in the console window

'MyModule' module is not available! You either mistakenly wrote the name of the module, or forgot to load it. If registering a module ensures that you specify the dependencies as the second argument.

So, please change nangular.module('myModule') to angular.module('myModule',[])

try this js code below instead of your code with my above changes

 angular.module('myModule',[]).controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) { $scope.checkItem = ""; $scope.loadEditForm = function () { $scope.checkItem = "yes"; $("#modal-form-edit").modal(); }; }]); 

Answer 3

Perhaps your modal (e.g. bootstrap modal) might be outside the ng-controller directive