ng-if condition always fails - html

Question

I'm using AngularJS
<div ng-repeat="l in kites">
<a ng-click="findit(l.green.num)">color</a>
<span ng-if="c_{{l.green.num}} == 'y'>kites is </span>
</div>
In my controller I have
$scope.cnt=[];
$scope.findit = function(c){
$scope.cnt.push(c);
angular.forEach($scope.cnt, function(value, key){
$scope['c_'+value] = 'y' ;
})
}
My problem is, I'm not getting the span value even the conditions falls true..
means while l.green.num is 5 , c_5 ='y'. But it is not accepted in the if condition. Please help me.

Answer 1

Below is your solution:
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.kites = [{
'green':{
'num':1
}
}]
$scope.cnt = [];
$scope.findit = function(c) {
$scope.cnt.push(c);
angular.forEach($scope.cnt, function(value, key) {
$scope['c_' + value] = 'y';
})
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="miniapp" ng-controller="Ctrl">
<div ng-repeat="l in kites">
<a ng-click="findit(l.green.num)">color</a>
<span ng-show="{{'c_'+l.green.num}} == 'y'">kites is </span>
</div>
</div>

Answer 2

I'm not sure you can use brackets in ng-if conditions. This won't interpolate the value before evaluation.
What you could do is adding a "selected" value to your kite when clicked.
Example :
Controller
$scope.findit = function(c){
c.selected = true;
}
View
<div ng-repeat="l in kites">
<a ng-click="findit(l.green)">color</a>
<span ng-if="l.green.selected">kites is </span>
</div>