<DOCTYPE html> <html> <head> <meta CHARSET="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <h2>Scope</h2> <fieldset> <legend> Location </legend> <div> Absolute URL {{current_url}} <br/> Protocol {{protocol}} <br/> Port {{port}} <br/> Host {{host}} <br/> </div> </fieldset> <fieldset> <legend> Timeout </legend> <div> {{greeting}} </div> </fieldset> <fieldset> <legend> Time Interval </legend> <div> {{counter}} </div> </fieldset> <fieldset> <legend> Custom Service </legend> <div> Square of 5 is {{square}} <br/> Cube of 5 is {{cube}} <br/> </div> </fieldset> <fieldset> <legend> HTTP Service </legend> <div> {{ajax_response}} </div> </fieldset> </body> <script> var app = angular.module("myApp", []); app.service('square_cube', function () { this.square = function (x) { return x * x; } this.cube = function (x) { return x * x * x; } }); app.controller("myCtrl", function ($scope, $location, $timeout, $interval, square_cube, $http) { $scope.current_url = $location.absUrl(); $scope.protocol = $location.protocol(); $scope.port = $location.port(); $scope.host = $location.host(); $timeout(function () { $scope.greeting = "Hello India" }, 5000); $scope.counter = 0; $interval(function () { $scope.counter = $scope.counter + 1; }, 1000); $scope.square = square_cube.square(5); $scope.cube = square_cube.cube(5); $http.get('ajax_response.html').then(function (response) { $scope.ajax_response = response.data[1].name; }); }); </script> </html>