$scope var not propagating in child - angularjs

Question

In a list of items, clicking an item opens up an input field using ng-show="showInput=true".
<div ng-app="myApp" ng-controller="Ctrl">
<li ng-click="showInput=true" ng-repeat="label in labels">{{label}} - ---> show input = {{showInput}}
<form ng-show="showInput" >
<input type=text value={{label}}><button ng-click="saveDate()">save</button>
</form>
</li>
</div>
However, when clicking on save, setting showInput=false the form is not hiding:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.labels=["click a", "click b", "click c", "click d", "click e"];
$scope.showInput = false;
$scope.saveData = function(){
$scope.showInput = false;
}
}]);
I suspect this is a parent / child scope issue. Can anyone point out how to make this work?
Fiddle: http://jsfiddle.net/supercobra/PUZzZ/

Answer 1

You have a few bugs here.
In your HTML you should write saveData() (not saveDate()).
When you click any element inside your li (including your button), it will set your showInput at true.
You are dealing with a pure JavaScript object within the scope. There is a question specificlly asking what to do with this at an AngularJS Meetup you can see here. The best solution seems to use an object so the child and the parent use the same referenced object. Here is how I've done it (using a key system instead of the label would be safer tho)
Look at this fiddle for my solution.
<div ng-app="myApp" ng-controller="Ctrl">
<li ng-repeat="label in labels">
<span ng-click="showInput[label] = true">{{label}}</span> - ---> show input = {{showInput}}
<form ng-show="showInput[label]" >
<input type=text value={{label}}><button ng-click="saveData(label)">save</button>
</form>
</li>
</div>
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.labels=["click a", "click b", "click c", "click d", "click e"];
$scope.showInput = {};
$scope.saveData = function(label){
$scope.showInput[label] = false;
}
}]);
This work perfectly. The problem is if you use a $scope variable inside a child, the parent will not be able to access it when you save.

Answer 2

The problem is indeed that ng-repeat creates its own scope and that you override your showInput.
What I usually do in this situation is to keep track of those forms which are currently shown and implement a toggle like method, like shown in this fiddle. This keeps track of the opened form within the controller and not the $scope object, which only provides methods (to all child scopes, such as that of ng-repeat) to access the private information.
You also have a typo in the call to saveData, but that is not the problem.

Answer 3

Yo have given <button ng-click="saveDate()"> in your view and in your controller you call the function as $scope.saveData. Typo error. change $scope.saveData to $scope.saveDate

Answer 4

why dont you try something like:
ng-click="showInput = false">
sometime using ng-click inside form doesnot work the way you want. u can try with input type='submit'
also that makes your work much easier.