title: Scope issues with Angular UI modal
body: <p>I'm having trouble understanding/using the scopes for an angular UI modal. </p>
  
  <p>While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I'm finding the bug.</p>
  
  <p>index.html (the important part of it)</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button class="btn dropdown-toggle btn-mini" data-toggle="dropdown"&gt;
          Actions
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu pull-right text-left"&gt;
          &lt;li&gt;&lt;a ng-click="addSimpleGroup()"&gt;Add Simple&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ng-click="open()"&gt;Add Custom&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ng-click="doBulkDelete()"&gt;Remove Selected&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller.js (again, the important part)</p>
  
  <pre><code>MyApp.controller('AppListCtrl', function($scope, $modal){
      $scope.name = 'New Name';
      $scope.groupType = 'New Type';
  
      $scope.open = function(){
          var modalInstance = $modal.open({
              templateUrl: 'partials/create.html',
              controller: 'AppCreateCtrl'
          });
          modalInstance.result.then(function(response){
  
              // outputs an object {name: 'Custom Name', groupType: 'Custom Type'}
              // despite the user entering customized values
              console.log('response', response);
  
              // outputs "New Name", which is fine, makes sense to me.                
              console.log('name', $scope.name);
  
          });
      };
  });
  
  MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
      $scope.name = 'Custom Name';
      $scope.groupType = 'Custom Type';
  
      $scope.ok = function(){
  
          // outputs 'Custom Name' despite user entering "TEST 1"
          console.log('create name', $scope.name);
  
          // outputs 'Custom Type' despite user entering "TEST 2"
          console.log('create type', $scope.groupType);
  
          // outputs the $scope for AppCreateCtrl but name and groupType
          // still show as "Custom Name" and "Custom Type"
          // $scope.$id is "007"
          console.log('scope', $scope);
  
          // outputs what looks like the scope, but in this object the
          // values for name and groupType are "TEST 1" and "TEST 2" as expected.
          // this.$id is set to "009" so this != $scope
          console.log('this', this);
  
          // based on what modalInstance.result.then() is saying,
          // the values that are in this object are the original $scope ones
          // not the ones the user has just entered in the UI. no data binding?
          $modalInstance.close({
              name: $scope.name,
              groupType: $scope.groupType
          });
      };
  });
  </code></pre>
  
  <p>create.html (in its entirety)</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" ng-click="cancel()"&gt;x&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Add Template Group&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;form&gt;
          &lt;fieldset&gt;
              &lt;label for="name"&gt;Group Name:&lt;/label&gt;
              &lt;input type="text" name="name" ng-model="name" /&gt;           
              &lt;label for="groupType"&gt;Group Type:&lt;/label&gt;
              &lt;input type="text" name="groupType" ng-model="groupType" /&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button class="btn" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;button class="btn btn-primary" ng-click="ok()"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, my question stands: why is the scope not being double-bound to the UI? and why does <code>this</code> have the customized values, but <code>$scope</code> does not?</p>
  
  <p>I have tried to add <code>ng-controller="AppCreateCtrl"</code> to the body div in create.html, but that threw an error: "Unknown provider: $modalInstanceProvider &lt;- $modalInstance" so no luck there.</p>
  
  <p>At this point, my only option is to pass back an object with <code>this.name</code> and <code>this.groupType</code> instead of using <code>$scope</code>, but that feels wrong.</p>