Change class in parent view via controller, AngularJS

I'm new to Angular and would appreciate if someone could advise on following.

I have the two views, parent and partial:

var app = angular.module('appModule', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/category");
    $stateProvider
        .state('category', {
            url: '/category',
            templateUrl: 'category.html',
            controller: 'categoryController as catCtrl'
        })

        .state('category.categoryDetail', {
            url:'/:id',
            templateUrl: 'categoryDetail.html',
            controller: 'categoryDetailController as catDetailCtrl'
        })
});

and the two controllers, where in second one I'm trying to change class of the DOM element in parent view:

app.controller("categoryController", function($scope, $http)
{
     $scope.smallItem= "item-bg"; //this is working only for the first time
}
app.controller("categoryDetailController", function($scope,$http, $stateParams)
{  
    $scope.$parent.smallItem= "item-sm";
}

And in my parent view category.html I have the DOM with changeable class and link to categoryDetail.html:

<div class="category-item" ng-class="smallItem"> 
<a ui-sref=".categoryDetail({id:category.id})" >

The problem is that my class is not changing back to item-bg when I return back to category.html and it is still item-sm. Should I update the route or scope of parent view?