AngularJS - ngModel in nested directives

Simple example for StackOverflow (http://stackoverflow.com/questions/19429958/passing-ng-model-in-nested-directives)

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in mainList track by $index">{{item.name}}
        <button ng-click="myFunc(item);">Add to other list</button>
        </li>
    </ul>
    <hr>
    <ul>
        <li ng-repeat="item in otherList track by $index">{{item.name}}</li>
    </ul>
</div>

JavaScript

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.mainList = [];
    $scope.mainList.push({ name: 'john', age:30 });
    $scope.mainList.push({ name: 'jane', age:20 });
    
    $scope.otherList = [];
    $scope.myFunc = function(obj) {
        // do something with obj
        obj.name += ' Added!';
        $scope.otherList.push(obj);
    }
});