Array text call into ionic card with change in variable


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.


angular.module('starter', ['ionic', 'starter.controllers', '', '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;


<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> 
    	<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">