Scope binding not working in modal popup angularjs

Question

I am using angular to bind data to my UI which works perfectly well. But when a modal popup is called on button click, the binding in the modal 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

Seems like you are opening the modal using plain jQuery approach. This is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.

Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service.

The usage then would 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 your modal-dialog div tag.

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

Update

I think you got this below error in your console window

Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

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

try this below js code 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();
    };


}]);