Trigger Angular scope id remotely outside of ng-repeat - angularjs

Question

I am looking for some help with a little Angular App.
I have a group of items/images that when a plus icon is clicked, all other items are covered and the selected item is not covered.
I want to now trigger this from outside of the ng-repeat.
I am looking for a way to trigger the cover effect when clicking on a text link, as well as the plus icon now used.
Have it use both options.
So far I have the text triggers fire off a id, that can be used in the app code.
Here is a Working FIDDLE.
Here is the original question that Avijit Gupta did for this.
Avijit's post is the excepted answer.
Any help with this is greatly appreciated.
The nav Text trigger code...
<div class="col-xs-12 navText">
<ul>
<li><a href data-id='1' data-ng-click="idLocation($event)">ONE</a></li>
<li><a href data-id='2' data-ng-click="idLocation($event)">TWO</a></li>
<li><a href data-id='3' data-ng-click="idLocation($event)">THREE</a></li>
<li><a href data-id='4' data-ng-click="idLocation($event)">FOUR</a></li>
<li><a href data-id='5' data-ng-click="idLocation($event)">FIVE</a></li>
</ul>
</div>
The app code...
// nav text trigger id's
$scope.idLocation = function (e) {
ids = $(e.target).data('id');
console.log(ids);
};
$scope.setToInitialState = function() {
$scope.blocks.forEach(function(block) {
$scope.isSelected[block.id] = false;
$scope.isCovered[block.id] = false;
});
};
$scope.selectBlock = function(id) {
$scope.isSelected[id] = !$scope.isSelected[id];
$scope.isCovered[id] = false;
if ($scope.isSelected[id]) {
$scope.blocks.forEach(function(block) {
if (block.id !== id) {
$scope.isCovered[block.id] = true;
$scope.isSelected[block.id] = false;
}
});
}
else {
$scope.setToInitialState();
}
};
});
How it works...

Answer 1

I suggest you to use the same ng-repeat in tag li and the same function selectBlock in tag a.
<div class="row">
<div class="col-xs-12 navText">
<ul>
<li ng-repeat="block in blocks"><a href data-ng-click="selectBlock(block.id)">{{block.name}}</a></li>
</ul>
</div>
</div>
Also I add the field name for each element in blocks.
$scope.blocks = [
{
id: '1',
name: 'ONE',
block: "1",
},
{
id: '2',
name: 'TWO',
block: "2",
},
{
id: '3',
name: 'THREE',
block: "3",
},
{
id: '4',
name: 'FOUR',
block: "4",
},
{
id: '5',
name: 'FIVE',
block: "5"
}
];

Answer 2

To Answer my own question.
One way to trigger the cover effect from outside of the ng-repeat.
What I did here was to use the selectBlock() in a data-ng-click and just hard code the ID into the selectBlock().
Like this...
<li><a href data-ng-click="selectBlock('1')">ONE</a></li>
<li><a href data-ng-click="selectBlock('2')">TWO</a></li>
<li><a href data-ng-click="selectBlock('3')">THREE</a></li>
<li><a href data-ng-click="selectBlock('4')">FOUR</a></li>
<li><a href data-ng-click="selectBlock('5')">FIVE</a></li>
Here is the demo of it working by clicking the TEXT and the +/- icon.
Working FIDDLE.