Gulp-uglify angularjs app with ui.router is not moving to the next $state

Question

I'm using gulp with ngAnnotate and uglify to minify my javascript files in Angular v1.3.7.

gulpfile.js

'use strict'
var gulp = require('gulp'),  
   concat = require('gulp-concat'),
   ngAnnotate = require('gulp-ng-annotate'),  
   uglify = require('gulp-uglify'),
   rename = require('gulp-rename');

gulp.task('scripts', function () {    
return gulp.src([
                'Web/js/app.js',
                'Web/js/config.js',
                'Web/js/directives.js',
                'Web/js/filters.js',
                'Web/app/appController.js'])
    .pipe(concat('main.js'))
    .pipe(ngAnnotate({
        remove: true,
        add: true,
        single_quotes: true
    }))
    .pipe(rename('main.min.js')) 
    .pipe(uglify())
    .pipe(gulp.dest('Build/js'));
});
 gulp.task('scripts');

The app loads fine, but I'm not able to move to the next $state. More specifically, the login page loads and I can tell from the network calls that I'm logged in with the appropriate user info. I debugged it in Chrome using its beautify (i.e. {}) and found that it wouldn't proceed at $state.go("index.home").

Here's my config file. I've done numerous search in S.O., but only found issues regarding dependency injection. I believe that is not the issue, at least initially.

config.js

(function () {
"use strict";
  var config = function ($stateProvider, $httpProvider, User_Roles, $urlRouterProvider, IdleProvider, vcRecaptchaServiceProvider) {
     $stateProvider
        .state("login", {
            url: "/login",
            templateUrl: "Web/app/login.html",
            controller: "LoginCtrl",
            controllerAs: "ctrl",
            data: {
                pageTitle: "Login"
            }
        })
        .state("index", {
            abstract: true,
            url: "/index",
            templateUrl: "Web/views/common/content.html"
        })
       .state("index.home", {
            url: "/home",
            templateUrl: "Web/app/homePage.html",
            controller: "HomeController",
            controllerAs: "homeCtrl",
            data: {
                pageTitle: "Home",
                authorizedRoles: [User_Roles.admin, User_Roles.provider]
            },
            resolve: {
                auth: function resolveAuthentication(AuthResolver) {
                    return AuthResolver.resolve();
                },
                companyName: function getCompanyName(AppFactory) {
                    return AppFactory.getCompanyName();
                }
            }
        })
}

angular.module("myApp")
    .config(['$stateProvider', '$httpProvider', 'User_Roles', '$urlRouterProvider', 'IdleProvider', 'vcRecaptchaServiceProvider', config]);

})();

The app loads fine and back end calls to authorize the user also works. I thought it was my config.js above, but it may be in the appController.js. I'm attaching it below.

appController.js

 (function () {
    "use strict";
 var LoginController = function ($scope, $rootScope, Auth_Events, AuthenticFactory, AppFactory, $location, $modal, Session, Idle, $document, $state) {
 var vm = this;
 vm.login = function(credentials){
       AuthenticFactory.login(credentials)
          .then(function(data){ // when uglified it becomes var 'e'
           //if data exists do stuff
          $state.go("index.home") //it reaches here, but it does not go to that $state, nor does it throw any error.
           }, function(error){ //funny thing is that when uglified, this becomes the var 'e' that is the same as the var 'e' that data becomes.
           //if error kick them out
        });
      };
 };
  angular
    .module("myApp")
    .controller("LoginCtrl", ["$scope", "$rootScope", "Auth_Events", "AuthenticFactory", "AppFactory", "$location", "$modal", "Session", "Idle", "$document", "$state", LoginController]);
 })();

The browser doesn't throw any error. It just doesn't move on to the home page. Any help is much appreciated. Thanks in advance!