Controller as in Angular 1.2

Demonstrates usage of controller as in a view, in a route and in a directive

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp">
    
    <div ng-controller="MainCtrl">
        <input ng-model="newItem" ng-keydown="$event.which === 13 && addNewItem(newItem)"/>
        <button ng-click="addNewItem(newItem)">Add</button>
        <br/><hr/>
        
        <div id="items-list" scroll-to-new-item> 
            <div ng-repeat="item in items | orderBy: 'name'">
                <input ng-model="item.name" value="{{item.name}}" ng-readonly="true"/>
            </div>
        </div>
    </div>
    
</div>

CSS

#items-list{
    height: 100px;
    overflow: auto;
    width: 200px;
}

JavaScript

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

app.controller("MainCtrl", function($scope){
    $scope.items = [
        {id: 1, name: "aaa"}, {id: 2, name: "bbb"},         
        {id: 3, name: "ccc"}, {id: 4, name: "ddd"}, 
        {id: 5, name: "eee"}, {id: 6, name: "fff"},        
        {id: 7, name: "ggg"}, {id: 8, name: "hhh"}, 
        {id: 9, name: "jjj"}, {id: 10, name: "kkk"}, 
        {id: 11, name: "lll"}, {id: 12, name: "mmm"}, 
        {id: 13, name: "nnn"}, {id: 14, name: "ooo"}, 
        {id: 15, name: "ppp"}, {id: 16, name: "qqq"}, 
        {id: 17, name: "rrr"}, {id: 18, name: "sss"}, 
        {id: 19, name: "ttt"}, {id: 20, name: "vvv"}
    ];
    
    $scope.addNewItem = function(newItem){
    	$scope.items.push({name: newItem});
        $scope.$broadcast('scroll-event', newItem);
        $scope.newItem = "";
    };
});

app.directive("scrollToNewItem", function($timeout){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('scroll-event', function (event, newValue) {
                $timeout(function(){
                    if(newValue){
                        var scrollPosition = $('#items-list input[value=' + newValue + ']').offset().top;
                        $('#items-list').animate({
                            scrollTop: scrollPosition
                        }, 'slow');
                    }
                });
            });
        }
    };
});