title: Angular UI Bootstrap Modal update $scope
body: <p>I want to use the modal to edit my data. I pass the data to the modal instance. When I click ok I pass the edited data in the $scope.selected back to the controller. </p>
  
  <p>There I would like to update the original $scope. Somehow the $scope doesn't update though. What am I doing wrong?</p>
  
  <pre><code>var ModalDemoCtrl = function ($scope, $modal, $log) {
  
    $scope.data = { name: '', serial: ''  }
  
    $scope.edit = function (theIndex) {
  
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
          items: function () {
            return $scope.data[theIndex];
          }
        }
      });
  
      modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
  
        // this is where the data gets updated, but doesn't do it
        $scope.data.name = $scope.selected.name;
        $scope.data.serial = $scope.selected.serial;
  
      });
    };
  };
  </code></pre>
  
  <p>Modal Controller:</p>
  
  <pre><code>var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
  
    $scope.items = items;
    $scope.selected = {
      name: $scope.items.name,
      serial: $scope.items.serial
    };
  
    $scope.ok = function () {
      $modalInstance.close($scope.selected);
    };
  
    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  };
  </code></pre>
  
  <p>Modal:</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;h3&gt;{{ name }}&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;input type="text" value="{{ serial }}"&gt;
      &lt;input type="text" value="{{ name }}"&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
      &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>