Lean Controller - incorrect way

A not so lean controller that lets the controller do all the work.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.18/angular.min.js"></script>
<div ng-controller="myCtrl">
    <button ng-click="removeItem()">Remove first item</button>
    <ul>
        <li ng-repeat="item in items" ng-click="selectItem($index)" ng-class="{'selected': selectedItem === $index}">{{item}}</li>
    </ul>
</div>
<div ng-controller="otherCtrl">{{getSelectedItem()}}</div>

CSS

.selected {
    color: red;
}

JavaScript

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

angular.module('myApp')
    .controller('myCtrl', function ($scope) {

    $scope.items = ['one', 'two', 'three', 'four'];
    $scope.selectedItem = -1;

    $scope.removeItem = function () {
        if ($scope.items.length) {
            $scope.items.splice(0, 1);
        }
    };

    $scope.selectItem = function (index) {
        $scope.selectedItem = index;
    }
});

angular.module('myApp')
    .controller('otherCtrl', function ($scope) {
    var $ctrlScope = angular.element('button').scope();
        
    $scope.getSelectedItem = function getSelectedItem() {
        return $ctrlScope.selectedItem;
    }
});