title: scope function inside controller not updating the values according to ng-models in the view
body: <p>Hi i got this function in the controller that is called from the ng-view:</p>
  
  
  
  <pre><code>productApp.controller('ModalInstanceCtrl', function ($scope, $modalInstance, productFactory, prodId) {     
  
  $scope.ok = function () {
            console.log($scope.model_productDescription);
            $scope.$watch(['model_productBrand,model_productName,model_productDescription,model_productPrice, model_productStock'], function() {
                var stock = '';
                if($scope.model_productStock) {
                    stock = 'AVAILABLE';
                }else{
                    stock = 'NO STOCK';
                }
  
                var productObject = {
                        id : prodId,
                        prodBrand : $scope.model_productBrand,
                        prodName : $scope.model_productName,
                        description : $scope.model_productDescription,
                        price : $scope.model_productPrice,
                        prodStock : stock
                }
  
                productFactory.updateProductById(productObject, function successCallback(data) {
                    // do something here in data
                }, function errorCallback(data, status) {
                    alert(data + ' Failed with error ' + status); 
                }); 
            })     
        };
  });
  </code></pre>
  
  <p>This is the modal.htm body:
  </p>
  
  <pre><code>&lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" ng-click="cancel()"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Modify a Product&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal"&gt;
              &lt;fieldset&gt;          
                  &lt;!-- Row 1 --&gt;
                  &lt;div class="col-md-12 col-centered"&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="prod_brand"&gt;Product Brand&lt;/label&gt;
                          &lt;input type="text" id="prod_brand" class="form-control"
                              ng-model="model_productBrand" required="required" value="prod.prodBrand"&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="prod_name"&gt;Product Type&lt;/label&gt; &lt;input
                              type="text" id="prod_name" class="form-control"
                              ng-model="model_productName" required="required" value="prod.prodName"&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="prod_price"&gt;Price&lt;/label&gt;
                          &lt;div class="input-group"&gt;
                              &lt;span class="input-group-addon"&gt;$&lt;/span&gt; &lt;input type="text"
                                  class="form-control" ng-model="model_productPrice" value="prod.price"&gt; &lt;span
                                  class="input-group-addon"&gt;.00&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;  
                      &lt;div class="control-group"&gt;
                          &lt;label class="control-label" for="prod_description"&gt;Description&lt;/label&gt;
                          &lt;textarea id="prod_description" class="form-control" ng-model="model_productDescription" cols="70" rows="3"&gt;{{prod.description}}&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group" style="margin-top: 10px"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;span class="input-group-addon"&gt; &lt;input type="checkbox" ng-model="model_productStock"&gt;
                              &lt;/span&gt; 
                              &lt;span class="form-control no-cursor"&gt;Stock&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" ng-click="cancel()"&gt;Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary" ng-click="ok()"&gt;Edit product&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  </code></pre>
  
  <p>Now, if i type in the textarea (for example), and press the ok button, it will get into this function. Now, since the textarea value has changed, shouldn't be reflected in the $scope.productDescription value? looks like it's not. I thought that whenever you make a change in the model, it would override the $scope.model_name value, should i use ng-change or any other directive for this?</p>
  
  <p>Tried adding a $watch but it's not working either, any suggestion?</p>
  
  <p>P.S: console.log($scope.model_productDescription); // shows the old description despite the fact i change it</p>
  
  <p>Thanks. </p>