I'm using Angular 1.6 with django, if i refresh a page django serves the html file but controllers are not loading

Question

I'm sharing my main.js, controller.js, home_page.html, index.html file below. Please some one help me fix the issue which is, when i was in the home page ('127.0.0.1:8000/home/') and try to refresh the page im getting only the html page and all the contents in the rootScope or scope disappears. But this is usual but i don't know how to again gain the data from the controller.

main.js

$stateProvider
.state("base", {
    url : "/",
    views : {
        "main-content" : {
            controller : "baseController",
            template : "<div ui-view='content'></div>"
        }
    }
})
.state("base.login", {
    url : "account/login/",
    views : {
        "content" : {
            controller : "loginController",
            templateUrl : "/account/login/"
        }
    }
})
.state("base.register", {
    url : "account/register/",
    views : {
        "content" : {
            controller : "registerController",
            templateUrl : "/account/register/"
        }
    }
})
.state("base.home", {
    url : "home/",
    views : {
        "content" : {
            controller : "homeController",
            templateUrl : "/home/"
        }
    }
})
.state("base.changepassword", {
    url : "settings/",
    views : {
        "content" : {
            controller : "changePasswordController",
            templateUrl : "/settings/"
        }
    }
})

controller.js

myApp.controller('homeController', ['$http', '$scope', '$window', '$rootScope', function($http, $scope, $window, $rootScope) {
    // debugger;
    if (! $rootScope.currentUser.first_name) {
        var search_payload = {
            "email": $rootScope.currentUser.email
        };

        $http({
            url: '/api/current/user/',
            method: "POST",
            data : search_payload,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        }).then(function(response) {
            $rootScope.currentUser = response.data;
            console.log("Current User - ", $rootScope.currentUser);
        });
    }

    $scope.clear_cookie = function ($event) {
        $event.preventDefault();
        console.log("Clear Cookie");

        var cookies = document.cookie.split(';');

        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            document.cookie = name + "=;expires=Thu, 21 Jun 2018 12:00:00 GMT";
        }

        $http({
            url: '/api/logout/',
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        }).then(function(response) {
            console.log(response);
            if (response.data.status == 'success') {
                window.location = '/';
            }
        });
    };

    $scope.submit = function ($event, currentUser, isValid) {
        $event.preventDefault();

        if (isValid) {
            var search_payload = {
                "update": "true",
                "username": currentUser.username,
                "first_name": currentUser.first_name,
                "last_name": currentUser.last_name,
                "age": currentUser.age,
                "email": currentUser.email,
                "mobile": currentUser.mobile,
                "address": currentUser.address
            };

            console.log(search_payload);

            $http({
                url: '/api/current/user/',
                method: "POST",
                data : search_payload,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                }
            }).then(function(response) {
                $rootScope.currentUser = response.data;
                console.log("Current User - ", $rootScope.currentUser);
                if(response.data.status == 'success') {
                    swal({
                        title: "Success",
                        text: "Successfully updated your profile.",
                        icon: "success",
                        button: "Okay!",
                    });
                } else {
                    swal({
                        title: "Failed",
                        text: "Something went wrong sorry please try again after sometime.",
                        icon: "error",
                        button: "Okay!",
                    });
                }
            });
        } else {
            swal({
                title: "Failed",
                text: "Please correct the errors and submit the form.",
                icon: "error",
                button: "Okay!",
            });
        }
    }
}]);

home_page.html

<div class="login_form_class" ng-if="currentUser.username">
    <form name="updateForm">
      {% csrf_token %}
      <div name="login_form" class="login_form col-md-4">
        <div class="header">PROFILE</div>

        <hr/>
        <label class="input_label col-md-5" for="username">USERNAME</label>
        <input class="input_box col-md-7" type="text" id="username" name="username" ng-init="username='{$ currentUser.username $}'" ng-model="currentUser.username" placeholder="{$ currentUser.username $}" value="{$ currentUser.username $}" pattern="[a-zA-Z0-9]+"/>
        <div role="alert">
          <span class="error error_msg pull-right" ng-show="updateForm.username.$error.pattern">Must contain only alphanumeric Special characters are not allowed</span>
        </div>
        <br/>

        <label class="input_label col-md-5" for="first_name">FIRST NAME</label>
        <input class="input_box col-md-7" type="text" id="first_name" name="first_name" ng-init="first_name='{$ currentUser.first_name $}'" ng-model="currentUser.first_name" placeholder="{$ currentUser.first_name $}" value="{$ currentUser.first_name $}" pattern="[A-Za-z]+"/>
        <div role="alert">
          <span class="error error_msg pull-right" ng-show="updateForm.first_name.$error.pattern">Must contain only alphabets</span>
        </div>
        <br/>

        <label class="input_label col-md-5" for="last_name">LAST NAME</label>
        <input class="input_box col-md-7" type="text" id="last_name" name="last_name" ng-init="last_name='{$ currentUser.last_name $}'" ng-model="currentUser.last_name" placeholder="{$ currentUser.last_name $}" value="{$ currentUser.last_name $}" pattern="[a-zA-Z]+"/>
        <div role="alert">
          <span class="error error_msg pull-right" ng-show="updateForm.last_name.$error.pattern">Must contain only alphabets</span>
        </div>
        <br/>

        <label class="input_label col-md-5" for="age">AGE</label>
        <input class="input_box col-md-7" type="text" id="age" name="age" ng-init="age='{$ currentUser.age $}'" ng-model="currentUser.age" placeholder="{$ currentUser.age $}" value="{$ currentUser.age $}" ng-minlength="2" ng-maxlength="2" pattern="[0-9]{2}"/>
        <div role="alert">
          <span class="error error_msg pull-right" ng-show="updateForm.age.$error.minlength">Must have a number</span>
          <span class="error error_msg pull-right" ng-show="updateForm.age.$error.maxlength">Must be two digit</span>
          <span class="error error_msg pull-right" ng-show="updateForm.age.$error.pattern">Must be an integer</span>
        </div>
        <br/>

        <label class="input_label col-md-5" for="email">EMAIL</label>
        <input class="input_box col-md-7" type="email" id="email" ng-init="email='{$ currentUser.email $}'" ng-model="currentUser.email" placeholder="{$ currentUser.email $}" value="{$ currentUser.email $}" disabled/>
        <br/>

        <label class="input_label col-md-5" for="mobile">MOBILE</label>
        <input class="input_box col-md-7" type="text" id="mobile" name="mobile" ng-init="mobile='{$ currentUser.mobile $}'" ng-model="currentUser.mobile" placeholder="{$ currentUser.mobile $}" value="{$ currentUser.mobile $}" ng-minlength="10" ng-maxlength="10" pattern="[0-9]{10}" />
        <div role="alert">
          <span class="error error_msg pull-right" ng-show="updateForm.mobile.$error.minlength">Must contain 10 digits</span>
          <span class="error error_msg pull-right" ng-show="updateForm.mobile.$error.maxlength">Must contain only 10 digits</span>
          <span class="error error_msg pull-right" ng-show="updateForm.mobile.$error.pattern">Must contain only numbers</span>
        </div>
        <br/>

        <label class="input_label col-md-5" for="address">ADDRESS</label>
        <textarea class="input_box col-md-7" id="address" ng-init="address='{$ currentUser.address $}'" ng-model="currentUser.address" placeholder="{$ currentUser.address $}">{$ currentUser.address $}</textarea>
        <br/>
        <button type="submit" class="btn btn-info update_btn" ng-click="submit($event, currentUser, updateForm.$valid)">SAVE CHANGES</button>
      </div>
    </form>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script>
      var cookie = document.cookie.split('=')[1];
      var search_payload = {
        "email": cookie.split(';')[0]
      };

      var promise = $.ajax({
        url: '/api/current/user/',
        method: 'POST',
        data: search_payload
      });

      promise.done(function(response) {
        // $rootScope.currentUser = response;
        console.log(response);
      });
    </script>
  </div>

index.html

    <!DOCTYPE html>
<html ng-app="myApp">
<body>
    <div class="content_panel" ui-view="main-content"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.6/angular-material.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
    var csrftoken = Cookies.get('csrftoken');
    var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngMaterial', 'ngMessages', 'ngSanitize', 'ui.router']);
</script>

<script src="{% static 'main.js' %}"></script>
<script src="{% static 'controllers.js' %}"></script>
</html>