Array text call into ionic card with change in variable


#1

I’m trying to call an array item into a ionic card, the text in the card should adapt when there has been a change in my local storage variable x. This changes when a button is pressed.
Unfortunately all the tutorials I find with the arrays are using ng-repeat which doesn’t work well with ionic cards and the other tutorials are lists that you click then a new page is opened in the existing tab.
I’m looking only to change the text in a card when a button is pressed that changes my counter.

Be great if someone could show me how to adapt the html and app.js to achieve this.

Thx in advance.

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])

.controller('Ctrl', function($scope, $localStorage) 
{
	var Abby = [
	            { id: 0, name: 'Hello' },
	            { id: 1, name: 'Hello 2' },
	            { id: 2, name: 'Hello 3' },
	            { id: 3, name: 'Hello 4' }
	           ];
	
	$scope.$storage = $localStorage.$default({
        x: 42

    });
	$scope.deleteX = function() {
      delete $localStorage.x;
    };
    $scope.deleteY = function() {
      delete $localStorage.y;
    };
})

Html:

<ion-content class="padding" >
   
   
   <div ng-controller="Ctrl">
   		<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> 
    	<p></p>
    	<button ng-click="deleteX()">Clear x</button> | <button ng-click="deleteY()">Clear y</button>
   		<img src="./img/ionic{{$storage.x}}.png">
   		<div class="card">
   			<div class="item item-body">
      			
      		{{$Abby.{{$storage.x}}}}
      		
      		</div>
		</div>
	</div>
</ion-content>