AngularJS simple controller tutorial to increment a value

Angularjs basic controller example to initialize a number in view, and then increment it on button click. We’ll use controller, template and ng-click directive. The final outcome will look like the following screenshot.


<div ng-app="myApp" ng-controller='MyCtrl'>
  <button ng-click="inc();">click to increment</button>

<script src="//"></script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope) {
  $scope.val = 1;
  $ = function() {
    $scope.val += 1;

Few points to note

  1. When controller is created, the val is initialized to 1 using $scope.val = 1;.
  2. ng-click can take any javascript code. We could have also just used ng-click="val+=1;" also.
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments