AngularJS: how to split functionality into many controllers

Question

I have a single controller in my application http://jsfiddle.net/HKF9h/:

<div ng-controller="MyCtrl">
    All Items:
    <ul>
        <li ng-repeat="item in items">{{item }} - 
            <a href="" ng-click="like(item)">like it</a>
        </li>
    </ul>
    Items you liked:
    <ul>
        <li ng-repeat="item in likedItems">{{item }}
        </li>
    </ul>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.items= ['foo', 'bar', 'z'];
    $scope.likedItems = [];

    $scope.like = function (item) {
        if($scope.likedItems.indexOf(item) === -1) {
            $scope.likedItems.push(item);         
    }
}
</script>
}

I would like move all 'favoriting' functionality into sep controller that can be reused later. Here's what i did, but repeater is not showing likedItems anymore. What did I do wrong? http://jsfiddle.net/MR8wz/

<div ng-controller="MyCtrl">
    All Items:
    <ul>
        <li ng-repeat="item in items">{{item }} - 
            <a href="" 
               ng-controller="FavoriteCtrl" 
               ng-click="like(item)">like it</a>
        </li>
    </ul>
    Items you liked:
    <ul ng-controller="FavoriteCtrl">
        <li ng-repeat="item in likedItems">{{item }} //this one does not trigger
        </li>
    </ul>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.items= ['foo', 'bar', 'z'];
}

function FavoriteCtrl($scope) {
    $scope.likedItems = [];
    $scope.like = function (item) {
        console.log('you liked', item); //this one is displayed
        if($scope.likedItems.indexOf(item) === -1) {
            $scope.likedItems.push(item);         
        }
    }
}

Answer 1

You shouldn't really be relying on controller inheritance for sharing data. It's a bad case of close coupling. In Angular, if you want to share data, you're advised to use services/factories because:

1. They're easily injectable anywhere you need them
2. They're easily mockable
3. They're easily testable

FIDDLE

var myApp = angular.module('myApp',[]);

myApp.factory('Favorite', function(){
    var likedItems = [];

    function like(item) {
        console.log('you liked', item); //this one is displayed
        if(likedItems.indexOf(item) === -1) {
            likedItems.push(item);         
        }
    }

    function getLikedItems(){
        return likedItems;
    };

    return {
        like: like,
        getLikedItems: getLikedItems
    };
});

function MyCtrl($scope, Favorite) {
    $scope.favorite = Favorite;
    $scope.items = ['foo', 'bar', 'z'];
}

function FavoriteCtrl($scope, Favorite) {
    $scope.likedItems = Favorite.getLikedItems();
}

<div ng-controller="MyCtrl">
    All Items:
    <ul>
        <li ng-repeat="item in items">{{item }} - 
            <a href="" 
               ng-controller="FavoriteCtrl" 
               ng-click="favorite.like(item)">like it</a>
        </li>
    </ul>
    Items you liked:
    <ul ng-controller="FavoriteCtrl">
        <li ng-repeat="item in likedItems">{{item }}
        </li>
    </ul>
</div>

Answer 2

You use ng-controller directive two times

<a href="" ng-controller="FavoriteCtrl" ng-click="like(item)">like it</a>

and

<ul ng-controller="FavoriteCtrl">

It creates two different scope this is the reason it doesn't work. So if you move

$scope.likedItems = []; in parent controller MyCtrl then it works. Updated fiddle