Scope issues with Angular UI modal

Solution 1:

When nested scopes are involved, do not bind <input>s directly to members of the scope:

<input ng-model="name" /> <!-- NO -->

Bind them to at least a level deeper:

<input ng-model="form.name" /> <!-- YES -->

The reason is that scopes prototypically inherit their parent scope. So when setting 1st level members, these are set directly on the child scope, without affecting the parent. In contrast to that, when binding to nested fields (form.name) the member form is read from the parent scope, so accessing the name property accesses the correct target.

Read a more detailed description here.

Solution 2:

I got mine to work like this:

var modalInstance = $modal.open({
  templateUrl: 'partials/create.html',
  controller: 'AppCreateCtrl',
  scope: $scope // <-- I added this
});

No form name, no $parent. I'm using AngularUI Bootstrap version 0.12.1.

I was tipped off to this solution by this.

Solution 3:

Update Nov 2014:

Actually your code should work after upgrading to ui-bootstrap 0.12.0. Transcluded scope is merged with controller's scope so no more need for $parent or form. stuff.

Before 0.12.0:

The modal uses transclusion to insert its contents. Thanks to ngForm you can control the scope by name attribute. So to escape transcluded scope just modify the form this way:

<form name="$parent">

or

<form name="$parent.myFormData">

The model data will be available in controller scope.