AngularJS Tutorial - Add new item to UL list

The following code shows how to add new item to UL list.

Example


<!DOCTYPE html>
<html  ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<!--   www.  j ava  2s  .c  om-->
<style type='text/css'>
ul {
    height: 150px;
    overflow: scroll;
}
</style>
</head>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <button ng-click="add()">Add</button>
    <ul>
        <li ng-repeat="item in list">{{item}}</li>
    </ul>
</div>

<script type='text/javascript'>

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

function MyCtrl($scope) {
    $scope.list = ["item 1", "item 2","item 3","item 4","item 5"];
    $scope.add = function() {
        $scope.list.push("new item");
    }
}
</script>
</body>
</html>

The code above is rendered as follows: