AngularJS on when to use apply

A demo on $apply use

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div ng-controller='MainCtrl'>
    <ul>
        <li ng-repeat="user in users" ng-bind="user.name+' born in '+user.birthYear">
        </li>
    </ul>
    <input type="text" ng-model="name" placeholder="name" name="name" />
    <button ng-click="addUser()">Add user with angular</button>
    <button class="jq1">Add user with jquery without apply</button>
    <button class="jq2">Add user with jquery with apply</button>
</div>

SCSS

body{
    background:#666;
    
}
button{
    border:1px solid black;
    background:#2980b9;
    padding:10px;
    color:#fff;  
}
input{
    padding:10px;
    border:1px solid #444;
}
ul{
    background:rgba(0,0,0,.3);
    padding:20px;
    color:#fff;
    li{
        list-style:none;
        line-height:1.6em;
    }
}

JavaScript

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

app.controller('MainCtrl', function($scope){
    var users = [{
        name: 'jo',
        birthYear: '1986'
    },{
        name: 'so',
        birthYear: '1990'
    }];
    $scope.users = users;
    $scope.addUser = function(){
        if(!$scope.name){
            return;
        }
        users.push({name:$scope.name, birthYear: 'x'})
    }
    $('button.jq1').on('click', function(){
        var name = $('input[name=name]').val();
        users.push({name:name, birthYear: 'x'});
    });
    $('button.jq2').on('click', function(){
        var name = $('input[name=name]').val();
        $scope.$apply(function(){
            return users.push({name:name, birthYear: 'x'});
        });
    });
});


angular.bootstrap(document.body, ['app'])