AngularJS form in custom directive not updating after data binding - angularjs

Question

This is my code :
Template :
<div ng-repeat="framework in frameworks" id="{{framework.id}}"
role="tabpanel" class="tab-pane show active" >
<div class="progress" >
<div ng-click="display_framework_formulaire(framework)"
class="progress-bar" role="progressbar"
style="width: {{framework.level}}%"
aria-valuenow="{{framework.level}}"
aria-valuemin="0" aria-valuemax="100">
<div data-toggle="tooltip" data-placement="top"
data-title="{{framework.version}}">
</div>
{{framework.nom}}
</div>
</div>
</div>
This is the function in my controller :
$scope.display_framework_formulaire = function(framework)
{
$scope.frameworkCourant = framework;
$scope.vueCourante = 'VUE_FORMULAIRE_FRAMEWORK'
}
This is the directive in template:
<formulaire-framework ng-show="vueCourante == 'VUE_FORMULAIRE_FRAMEWORK'"
categories="categories" framework="frameworkCourant" >
</formulaire-framework>
And the directive :
app.directive("formulaireFramework", function() {
return {
restrict: "E",
templateUrl: 'formulaireFramework.html',
scope: {
framework : '=framework',
categories : '=categories'
},
}
})
So it's working after loading homepage.
But when i do :
restfulService.getFrameworksByCategorieValue(categorie_value)
.then(function(frameworks){
$scope.frameworks = [];
angular.forEach(frameworks, function(framework, key) {
$scope.frameworks.push(framework);
});
});
Which update the list of frameworks, when i click on a framework, the value of element of formulare is this of last action and not the value of the framework current.
PS : my form :
<form name="frameworkForm" id="frameworkForm" method="POST" class="spacer"
ng-submit="submit()" ng-controller="frameworkFormulaireController" >
<div class="input-group">
<select ng-model="framework.categorie.id">
<option ng-repeat="categorie in categories"
ng-value="categorie.id"
ng-selected="categorie.id == framework.categorie.id" >
{{categorie.label}}
</option>
</select>
</div>
<div class="input-group" >
<input type="text" class="form-control" ng-value="id"
ng-model="framework.id">
</div>
<div class="input-group">
<span class="input-group-addon">Nom</span>
<input type="text" class="form-control" ng-value="nom"
ng-model="framework.nom">
</div>
<div class="input-group">
<span class="input-group-addon">Version</span>
<input type="text" class="form-control" ng-value="version"
ng-model="framework.version">
</div>
<div class="input-group">
<span class="input-group-addon">Niveau</span>
<input type="text" class="form-control" ng-value="level"
ng-model="framework.level">
</div>
<input type="submit" class="btn btn-success pull-right" >
</form>

Answer 1

Remove the ng-controller directive from the form:
<form name="frameworkForm" id="frameworkForm" method="POST" class="spacer"
ng-submit="submit()" ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶f̶r̶a̶m̶e̶w̶o̶r̶k̶F̶o̶r̶m̶u̶l̶a̶i̶r̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶"̶ >
<!-- input controls -->
<!-- input controls -->
<!-- input controls -->
<!-- input controls -->
</form>
Add the controller to the directive:
app.directive("formulaireFramework", function() {
return {
restrict: "E",
templateUrl: 'formulaireFramework.html',
controller: 'frameworkFormulaireController',
scope: {
framework : '=framework',
categories : '=categories'
},
}
})
The ng-controller directive adds a new child scope which is unneccessary and can have prototypal inheritance variable hiding problems.
For more information, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?.