AngularJs cache ng-model for value input

Question

This is my form :

<div class="row responsive-sm" >
  <div class="col">
    <label class="item item-input item-stacked-label">
      <input type="text" ng-model="compte.nom" placeholder="Nom" >
    </label>
  </div>
</div>

<div class="row">  
  <div class="col">
    <button class="button button-block" ng-controller="detailsCompteInformation" ng-click="modifInfo()">Modifier mes informations</button>
  </div>
</div>

In my controller, i give value to compte.nom like this :

var nom="";

if(angular.isObject(response.field_nomFamille))
{
     nom=response.field_nomFamille.und[0].value;
}

dataDrupal={nom:nom};
$scope.compte=dataDrupal;

But when user click on my button for submit the form i call modifInfo() :

$scope.modifInfo = function() {
    console.log($scope.compte);
}

This function is in my controller .controller('detailsCompteInformation')

I can't get new value if the user has change the value in input compte.nom. I get my initiate value.

How can i refresh $scope.compte for get new value from the form ?

Answer 1

You have 2 div block. The first one dont have any controller The second one is binding to detailsCompteInformation controller.

In my controller, i give value to compte.nom like this :

I suppose you gave value to compte.nom in detailsCompteInformation controller then it's no relate to your first block (which has your input). You should try to wrap these 2 div blocks with a wrapper and bind it to detailsCompteInformation controller then remove detailsCompteInformation in second block. Something like this:

<div ng-controller="detailsCompteInformation">
  <div class="row responsive-sm" >
    <div class="col">
      <label class="item item-input item-stacked-label">
        <input type="text" ng-model="compte.nom" placeholder="Nom" >
      </label>
    </div>
  </div>

  <div class="row">  
    <div class="col">
      <button class="button button-block" ng-click="modifInfo()">Modifier mes informations</button>
    </div>
  </div>
</div>