Problem render

1

1
down vote
favorite
I am trying to solve a problem on ionic. I have two buttons that should display the reorder/delete buttons. but they dont change nothing.

this is the view:

  <ion-view view-title="Artist List">

  <div class="bar bar-subheader item-input-inset">

 <ion-content class="has-subheader" ng-controller="ListController">        




<img ng-src="img/{{item.shortname}}.jpg" alt="{{item.name}} Photo"/>

<h2>{{item.name}}</h2>
<h3>{{item.reknown}}</h3>
<p>
   {{item.bio | limitTo: 5}}
   {{item.bio.length > 5 ? '&hellip;' : ''}}
</p>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(item)" 
ng-show="item.star"></button>

<ion-option-button class="button-dark" ng-click="toggleStar(item)">
<i class="icon ion-star"></i>
</ion-option-button>
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
<ion-reorder-button class="ion-navicon" 
            on-reorder="moveItem(item, 
                        $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item> 

 </ion-content>
this is my controller: 
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state(‘tabs’,{
url:’/tab’,
abstract:true,
templateUrl:‘templates/tabs.html’
})
.state(‘tabs.home’,{
url:’/home’,
views:{
‘home-tab’:{
templateUrl:‘templates/home.html’
}
}
})
.state(‘tabs.list’,{
url:’/list’,
views:{
‘list-tab’:{
templateUrl:‘templates/list.html’,
controller:‘ListController’
}
}
})
.state(‘tabs.detail’,{
url:’/list/:aId’,
views:{
‘list-tab’:{
templateUrl:‘templates/detail.html’,
controller:‘ListController’
}
}
})

   $urlRouterProvider.otherwise('/tab/home');
})
.controller('ListController',['$scope','$http', '$state',
  function($scope, $http, $state){

$http.get(‘js/data.json’).success(function(data){
$scope.artists=data;
$scope.whichartist=$state.params.aId;
$scope.data={showReorder:true,showDelete:true};

$scope.onItemDelete = function(item) {
    $scope.artists.splice($scope.artists.indexOf(item), 1);
};        

$scope.toggleStar = function(item) {
    item.star = !item.star;
}

$scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.artists.splice(fromIndex, 1);
    $scope.artists.splice(toIndex, 0, item);
};    

$scope.doRefresh = function(){
    $http.get('js/data.json').success(function(data){
        $scope.artists = data;
        $scope.$broadcast('scroll.refreshComplete');
})};

});
}]);
what is the problem here? what do I miss? why the page isnt rendering after changing the scope data while clicking these buttons.