Digest cycle in angularjs

Digest cycle in angularjs is very same as any digestion process. As angularjs allows two way data binding, the change in model has to be applied to views or vice versa.

When an event is triggered which changes the model, angularjs initiates the digest cycle.

every time we bind data to view, an watcher is being initiated behind the scene to verify the changes which is similar to $watch. The digest cycle triggers the watchers which are continuously verifying the change in the model.

digest cycle runs maximum up to 10 times to compare the old value and the new value. It stops when they are same. Digest cycle starts at the $rootScope and propagates to each nested scope.

When you are using a JavaScript inbuilt function like setInterval instead of $interval to update the model then angularjs does not understand to trigger the digest cycle. That time we need to manually call the $scope.$apply() method to initiate the digest cycle.

Service, Factory and Provider

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

//service style, probably the simplest one
//When you’re using Service, AngularJS instantiates it behind 
//the scenes with the ‘new’ keyword. Because of that, you’ll add 
//properties to ‘this’ and the service will return ‘this’. When 
//you pass the service into your controller, those properties on 
//‘this’ will now be available on that controller through your service.
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";

//factory style, more involved but more sophisticated
//When you’re using a Factory you create an object, add 
//properties to it, then return that same object. When you 
//pass this factory into your controller, those properties 
//on the object will now be available in that controller 
//through your factory
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
//provider style, full blown, configurable version  
//Providers are the only service you can pass into your .config() function. 
//Use a provider when you want to provide module-wide configuration for 
//your service object before making it available.   
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!";

    this.setName = function(name) {
        this.name = name;

//hey, we can configure a provider!            

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    $scope.hellos = [
<body ng-app="myApp">
ng-controller="MyCtrl"> {{hellos}}