Seems that we have some stomping of $scope when creating Modal with $modal

[neosavvy]

I have a plunkr where I forked the example here: http://plnkr.co/edit/duiV2jSrxWHMhDYTiOLs?p=preview

Seems that if I create a property named someProperty and then create an input with ng-model assigned to it, I end up with a different scope.

I am outputting the $scope.$id value in the UI based on the one available for binding, then console.log'ing the $scope.$id in the controller instance for the modal and the caller.

Any clue as to why the UI has a new scope in this instance, seems that the expected behavior would be to use the $scope of the Modal's instance rather than a new one. Please let me know if I am doing something out of the norm here that isn't desired use.

[jbrowning]

This is a common issue and is actually related to Angular, not angular-foundation. What I believe you're experiencing is the sibling scope created by ngTransclude. Please see:

• ng-transclude should not create new sibling scope. angular/angular.js#5489
• $modal breaks forms b/c of transclusion angular-ui/bootstrap#969

The solution is to bind to properties of a model object not individual objects. For example, within your modal template, instead of:

<form>
  <input type="text" ng-model="someProperty">
</form>

We should do:

Parent controller

.controller("someController", ["$scope", function($scope) {
  $scope.someObject = {}
}]

Modal template

<form>
  <input type="text" ng-model="someObject.someProperty">
</form>

Please reopen if this does not describe your issue.

[tamakisquare]

@neosavvy

@jbrowning is right. What you are seeing is not so much an issue but the characteristics of angular's scope (javascript object, in precise) prototypal inheritance.

Once you get the essence of the scope prototypal inheritance, then you should get familiar with the scopes (yes, plural) involved in a modal. The topmost scope of a modal is what you have been working with in your controller (scope A). Under it, there's an isolated scope for modalWindow (scope B), which contains a transcluded scope (scope C). It's scope C that your modal template lives in and thus is what ng-model='someProperty' binds to, while you $watch for someProperty in scope A (which never get triggered).

[neosavvy]

My colleague actually helped solve this issue and it should have been obvious to me. http://plnkr.co/edit/uMGwaGbJWc7bP7Ar8jSA?p=preview

The above plunkr has the solution.