title: Two way binding not working with a variable in a Modal (Subcontroller) with angularjs
body: <p>Hello I got a list of products and I want people to select one of them and then a modal displays where they can enter extra info (a comment). I am using 'AngularJS' with 'Angular-UI' and 'Angular-UI-bootstrap'. I thought I would be able how to get it working with the example given at <a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">http://angular-ui.github.io/bootstrap/#/modal</a> However I can t seem to save the Comment. It always stays "Please enter a comment". Here is the code:</p>
  
  <p>The modal template:</p>
  
  <pre><code>   &lt;script type="text/ng-template" id="orderModal"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3&gt;Title&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="alignleft"&gt;{{Product.Naam}}&lt;/div&gt;
              &lt;div class="alignright"&gt;€{{Product.Prijs}}&lt;/div&gt;
              &lt;div style="clear: both;"&gt;&lt;/div&gt;
              &lt;p&gt;Heeft u een nog opmerking bij dit product?&lt;/p&gt;
              &lt;input type="text" name="Comment" ng-model="Comment" /&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" ng-click="ok()"&gt;Toevoegen&lt;/button&gt;
              &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Annuleren&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is are the controllers:</p>
  
  <pre><code>productModule.controller("ProductsController", function ($scope, bootstrappedData, $modal, $log) {
      $scope.products = bootstrappedData.products;
  
      ...
      $scope.AddNormalOrder = function (product) {
              ....
      };
  
      $scope.OpenModal = function (product)
      {
          var modalInstance = $modal.open({
              templateUrl: 'orderModal',
              controller: ModalInstanceCtrl,
              resolve: {
                  product: function () {
                      return product;
                  }
              }
           });
          modalInstance.result.then(function (order) {
              $scope.AddNormalOrder(order);
          }, function () {
              $log.info('Modal dismissed at: ' + new Date());
          });
      };
  });
  var ModalInstanceCtrl = function ($scope, $modalInstance, product) {
      $scope.Product = product;
      $scope.Comment = "Please enter a comment"; // it never changes
      $scope.ok = function () {
          var order = $scope.Product;
          order.Comment = $scope.Comment; // Here even if I check the value in debug after                     //changing it it still stays the same value ("Please enter a comment")
          $modalInstance.close(order);
      };
      $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
      };
  };
  </code></pre>
  
  <p>TL;DR
  The $scope.Comment in the ModalInstanceCtrl never changes if change the value in .</p>