Update Item in List to be shown when tapped - Angular JS

Question

I have a list that shows some items, here is the code that generates my list in my controller:

$scope.multipleOptions = [{ item: '1', checkmark:false}, { item: '2', checkmark:false},{ item: '3', checkmark:false} ];

Then in my HTML I have

<ion-list id="multiple-select-list" class=" ">
         <ion-item class="  " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected($index)">
                <p><b>{{multipleOption.item}}</b></p>
                <p class="button-icon ion-checkmark" ng-show="{{multipleOption.checkmark}}"></p>
        </ion-item>
</ion-list>

As you can see when the list loads the checkmarks for all the items are hidden, and I have a function called checkSelected($index) that is called when an item is tapped, in that function I want to set the checkmark to be shown, here is what I currently have

$scope.checkSelected = function(modalIndex) {
        //this set the checkmark property to true
        $scope.multipleOptions[modalIndex].checkmark = true;
        //the line below does not work 
        document.getElementById("multipl-select-list").getElementsByTagName("ion-item")[modalIndex].getElementsByTagName("p")[1].show = true;
    }

In the above method I am able to set the checkmark variable of the item to ture but what I am having troubel with is making it show right when the item is tapped? How can I set the ng-show of the checkmark so it shows right when it is tapped?

EDIT Solutions both worked I just wanted to add some behabiour I noticed, when I had ng-show={{multipleOption.checkmark}} the ng-hide class would be added to the class of that <p> so even when I set ng-show to true it would still not be shown

Thanks for all the help

Answer 1

HTML :

<ion-list id="multiple-select-list" class=" ">
         <ion-item class="  " ng-repeat="multipleOption in multipleOptions track by $index" ng-click="checkSelected(multipleOption)">
                <p><b>{{multipleOption.item}}</b></p>
                <p class="button-icon ion-checkmark" ng-show="multipleOption.checkmark"></p>
        </ion-item>
</ion-list>

In javascript function :

$scope.checkSelected = function(data) {
    data.checkmark = true;
}

Answer 2

I think the problem is with your syntax. Try removing curly brackets. Also take a look a this answer

ng-show="multipleOption.checkmark"