title: Reducing code complexity to increase readability and get conditional logic working
body: <p>I am trying to reduce code duplication in my controller which I have mocked up to test both on my browser and device. The core functionality works at the moment, but it currently violates the DRY principle. I attempted to add the following functionality which dictates what should be displayed on the home screen but it doesn't seem to be working at all:</p>
  
  <p>1) empty-state - appears when $scope.facebookUserData and $scope.facebookUserPicture are null</p>
  
  <p>2) showFacebookEmptyState - appears when $scope.facebookUserData and $scope.facebookUserPicture are not null but either one of $scope.userPicture , $scope.userProfile or $scope.userSelectedCategories are null</p>
  
  <p>3) showDefaultState - appears when all $scope.userPicture , $scope.userProfile or $scope.userSelectedCategories are not null regardless of anything else</p>
  
  <p>Does anyone have ideas on how to refactor the code below and make it easier to read? I am a bit overwhelmed by the mess it's become and I am struggling to find another approach.</p>
  
  <p><strong>home.view.html</strong></p>
  
  <p>
    </p>
  
  <pre><code>&lt;div class="empty-state" ng-show="showEmptyState"&gt;
    &lt;img class="icon icon-home" src="img/user.svg"&gt;
    &lt;div class="heading heading-padding"&gt;Set up your profile&lt;/div&gt;
    &lt;div class="subheading heading-padding"&gt;You will need to set up a profile before creating a resume. This will help us learn more about you
      &lt;br&gt;&lt;br&gt;
      &lt;button class="button button-balanced button-block remove-border-radius"&gt;Get Started&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="facebook-empty-state" ng-show="showFacebookEmptyState"&gt;
    &lt;img class="icon icon-home img-circle" ng-src="{{ facebookUserPicture.data.base64_data }}"&gt;
    &lt;div class="heading heading-padding"&gt;Welcome, {{ facebookUserData.first_name}}&lt;/div&gt;
    &lt;div class="subheading heading-padding"&gt;You will need to set up a profile before creating a resume. This will help us learn more about you.
      &lt;br&gt;&lt;br&gt;
      &lt;button class="button button-balanced button-block remove-border-radius" ui-sref="tab.setup-profile-facebook"&gt;Get Started&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="default-state" ng-show="showDefaultState"&gt;
    You have signed up and are ready to go
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>home.controller.js</strong></p>
  
  <pre><code>/*
  *
  */
  (function() {
    'use strict';
  
    angular
    .module('dingocv.controllers')
    .controller('HomeController', HomeController)
  
  
    function HomeController($scope, config, $cordovaNativeStorage, FacebookService, $ionicLoading, PhotoService, $log) {
  
      // On device
      if (window.cordova) {
  
        // Get Facebook access token
        $cordovaNativeStorage.getItem("facebookAccessToken").then(function (value) {
          $scope.facebookAccessToken = value
  
          // Get Facebook user data
          FacebookService.getUserData($scope.facebookAccessToken).then(function(dataResponse) {
            $scope.facebookUserData = dataResponse.data;
  
            // Save Facebook user data
            $cordovaNativeStorage.setItem("facebookUserData", $scope.facebookUserData).then(function () {
            }, function(error) {
              console.error("Unable to cache user data: " + result);
              $ionicLoading.show({
                template: 'Unable to cache user data',
                duration: 1500
              })
            });
            $scope.showFacebookEmptyState = true;
            $scope.showEmptyState = false;
            $scope.showDefaultState = false;
  
            // Get Facebook user picture
            FacebookService.getUserPicture($scope.facebookUserData.id).then(function(dataResponse) {
              $scope.facebookUserPicture = dataResponse.data;
              PhotoService.getBase64FromImageURL($scope.facebookUserPicture.data.url, function(base64_data) {
                $scope.facebookUserPicture.data.base64_data = base64_data;
  
                // Save Facebook user picture
                $cordovaNativeStorage.setItem("facebookUserPicture", $scope.facebookUserPicture).then(function () {
                }, function(error) {
                  console.error("Unable to cache user data: " + result);
                  $ionicLoading.show({
                    template: 'Unable to cache user data',
                    duration: 1500
                  })
                })
              });
            }, function(error) {
              $scope.showFacebookEmptyState = false;
              $scope.showEmptyState = true;
              $scope.showDefaultState = false;
              console.log(error.data.error.message)
            })
          }, function(error) {
            $scope.showFacebookEmptyState = false;
            $scope.showEmptyState = true;
            $scope.showDefaultState = false;
            console.log(error.data.error.message)
          })
        }, function (error) {
          $scope.showFacebookEmptyState = false;
          $scope.showEmptyState = true;
          $scope.showDefaultState = false;
          console.log(error)
        });
      }
  
  
      // On browser
  
      else {
        // Get Facebook user data
        FacebookService.getUserData(config.facebookAccessToken).then(function(dataResponse) {
          $scope.facebookUserData = dataResponse.data;
  
          // Save Facebook user data
          $cordovaNativeStorage.setItem("facebookUserData", $scope.facebookUserData).then(function () {
          }, function(error) {
            console.error("Unable to cache user data: " + result);
            $ionicLoading.show({
              template: 'Unable to cache user data',
              duration: 1500
            })
          });
          $scope.showFacebookEmptyState = true;
          $scope.showEmptyState = false;
          $scope.showDefaultState = false;
        }, function(error) {
          $scope.showFacebookEmptyState = false;
          $scope.showEmptyState = true;
          $scope.showDefaultState = false;
          console.log(error.data.error.message)
        })
  
        // Get Facebook user picture
        FacebookService.getUserPicture(config.facebookUserId).then(function(dataResponse) {
          $scope.facebookUserPicture = dataResponse.data;
          PhotoService.getBase64FromImageURL($scope.facebookUserPicture.data.url, function(base64_data) {
            $scope.facebookUserPicture.data.base64_data = base64_data;
  
            // Save Facebook user picture
            $cordovaNativeStorage.setItem("facebookUserPicture", $scope.facebookUserPicture).then(function () {
            }, function(error) {
              console.error("Unable to cache user data: " + result);
              $ionicLoading.show({
                template: 'Unable to cache user data',
                duration: 1500
              })
            });
            $scope.showFacebookEmptyState = true;
            $scope.showEmptyState = false;
            $scope.showDefaultState = false;
          }, function(error) {
            $scope.showFacebookEmptyState = false;
            $scope.showEmptyState = true;
            $scope.showDefaultState = false;
            console.log(error.data.error.message)
          })
        });
      }
  
      // Determine view state
      $cordovaNativeStorage.getItem("userPicture").then(function (value) {
          $scope.userPicture = value;
      }, function (error) {
          //$log.log(error);
      });
      $cordovaNativeStorage.getItem("userProfile").then(function (value) {
        $scope.userProfile = value;
      }, function (error) {
          //$log.log(error);
      });
      $cordovaNativeStorage.getItem("userSelectedCategories").then(function (value) {
        $scope.userSelectedCategories = value;
      }, function (error) {
          //$log.log(error);
      });
    }
  })();
  </code></pre>