I have a controller that creates a dialog with ngDialog.open. I assign scope:$scope and set scope variables with ng-model in the popup $dialog. However the values are not set in the controller $scope. The ng-click function is able to call a function in the $scope.

Is there something I am missing, I have searched quite a bit on here and github, read the docs and worked with all the examples provided on github in the project.

JS Fiddles below explains. It shows that the scope:$scope is not what it seems for .open(). It is a one way binding and does not go back to $scope. .openConfrm() seems to have the expected behavior.

ngDialog.open() - / (FIXED!! works like expected)

ngDialog.openConfirm() - / (works as expected)

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
$scope.FormData={newAccountNum:''};
$scope.ShowNgDialog = function () {
    ngDialog.open({            
        template: '<div><input type="text" ng-model="FormData.newAccountNum"/></div>',
        plain: true,
        scope:$scope

    });
}    

});

I have a controller that creates a dialog with ngDialog.open. I assign scope:$scope and set scope variables with ng-model in the popup $dialog. However the values are not set in the controller $scope. The ng-click function is able to call a function in the $scope.

Is there something I am missing, I have searched quite a bit on here and github, read the docs and worked with all the examples provided on github in the project.

JS Fiddles below explains. It shows that the scope:$scope is not what it seems for .open(). It is a one way binding and does not go back to $scope. .openConfrm() seems to have the expected behavior.

ngDialog.open() - http://jsfiddle.net/s1ca0h9x/ (FIXED!! works like expected)

ngDialog.openConfirm() - http://jsfiddle.net/tbosLoa9/ (works as expected)

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
$scope.FormData={newAccountNum:''};
$scope.ShowNgDialog = function () {
    ngDialog.open({            
        template: '<div><input type="text" ng-model="FormData.newAccountNum"/></div>',
        plain: true,
        scope:$scope

    });
}    

});

• javascript
• angularjs
• ng-dialog

• 1 how about a jsfiddle or plunker? – bluetoft Commented Sep 8, 2014 at 1:59
• I am working on a jsfiddle example. – howserss Commented Sep 8, 2014 at 11:26
• I have also posed this question to the ngDialog owner github.com/likeastore/ngDialog/issues/74 – howserss Commented Sep 8, 2014 at 15:02
• I don't see why you should edit the ngDialog source... why don't you directly assign $rootScope.newAccountNum when the Modal promise is resolved, instead? – digital illusion Commented Sep 9, 2014 at 11:39
• 1 I have resolved the issues for .open() and .openConfirm(). If I create varaibles using a javascript object then things wire up correctly. If its a stand alone variable like $scope.accountNum then it does not wire up using ng-model. – howserss Commented Sep 9, 2014 at 14:42

2 Answers 2

I have edited the original post and added it below. The FIXED link shows it working and the second shows it broken. Adding a dot (using a javascript object) fixes the problem.

ngDialog.open() - http://jsfiddle.net/s1ca0h9x/ (FIXED!! works like expected)

ngDialog.openConfirm() - http://jsfiddle.net/tbosLoa9/ (works as expected)

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
    $scope.FormData={newAccountNum:''};
    $scope.ShowNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="FormData.newAccountNum"/></div>',
            plain: true,
            scope:$scope

        });
    }    
});     

ngDialog passes scope with properties of any types - http://jsfiddle.net/akgdxhd0/

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
  $scope.accountNum = '';
  $scope.ShowNgDialog = function () {
    ngDialog.open({            
        template: '<div><input type="text" ng-model="accountNum"/></div>',
        plain: true,
        scope: $scope
    });
  };    
});