using promise in angular

smartColorController.js

// this controller depends on StyleSwitcherController in instant_website

;(function () {
  'use strict';

  angular
    .module('iwApp')
    .controller('SmartSite.Customize.SmartColorController', SmartColorController);

  SmartColorController.$inject = ['$controller', '$scope', '$state', '$timeout', '$q', 'events', 'ApiService', 'logoFactory', 'SmartColorService'];

  function SmartColorController($controller, $scope, $state, $timeout, $q, events, ApiService, logoFactory, SmartColorService) {
    var vm = this,
        originalPrimaryColorCSS,
        iframeElement = angular.element('.iframe-preview');

    angular.extend(vm, $controller('StyleSwitcherController', { $scope: $scope }));
    vm.resetColorAndBackground = resetColorAndBackground;
    vm.loading = true;

    function init() {
      _getInstantWebsite()
        .then(_getLogo)
        .then(_getSmartColors)
        .then(_firstChangePrimaryColor)
        .then(_onLoadIframe)
        .then(_assignInitialValues)
    }

    init();

    function resetColorAndBackground() {
      var iwIframe = angular.element('.iframe-preview').contents();

      iwIframe.find("link[href*='" + vm.iw.template.attributes.name + "/all']").attr('href', originalPrimaryColorCSS);
    }

    // private
    //

    function _assignInitialValues() {
      originalPrimaryColorCSS = iframeElement.contents().find("link[href*='" + vm.iw.template.attributes.name + "/all']").attr('href');
    }

    function _onLoadIframe() {
      var deferred = $q.defer(),
          content  = iframeElement.contents();

      if(content) {
        deferred.resolve();
      } else {
        iframeElement.load(function() {
          deferred.resolve();
        })
      }

      return deferred.promise;
    }

    function _getInstantWebsite() {
      return  ApiService.currentListing().one('/website').get()
                .then(function (websiteResponse) {
                  vm.iw = websiteResponse;
                  vm.iwPrimaryColor  = vm.iw.attributes.color_name;
                  vm.iwPrimaryColors = vm.iw.template.attributes.colors;
                }, function(response) {
                  $state.go(response.status);
                })
    }

    function _getLogo() {
      return  logoFactory.get().then(function(response) {
                vm.logoUrl = response.data.logo_url;
                vm.loading = false
              })
    }

    function _getSmartColors() {
      var deferred = $q.defer(),
          $image = $('<img crossorigin="anonymous" src="' + vm.logoUrl + '">');

      $image.on('load', function(){
        var smartColor = new SmartColorService.SmartColor($image[0]);
        vm.smartColors = smartColor.filterWith(vm.iwPrimaryColors);

        $scope.$digest();
        deferred.resolve()
      });

      return deferred.promise;
    }

    function _firstChangePrimaryColor() {
      var isSelectedSmartColor  = _.find(vm.smartColors, function(c) { return c.name == vm.iwPrimaryColor });
      if(isSelectedSmartColor) return;

      var firstColor = vm.smartColors[0];
      if(firstColor) vm.changePrimaryColor(firstColor, vm);
    }

    function _buildParams() {
      var website = {};
      website.type = 'listing.instant_website';
      website.attributes = {};
      website.attributes.color_name = vm.iwPrimaryColor;

      return website;
    }
  }
})();