Page Freezes in Angular JS 1.5?

Question

I can't figure out what happening in my code so that's the reason I thought to post my issue over the forums.

I am trying to implement the Dynamic Menu using AngularJS 1.5 in my Asp.Net MVC 5.0 application but as soon as I navigation to other menu the page freezes so you guys can you please help me why my page is freezing up.

Sorry can't figure out what exactly the issue so anyone pls point me...

Code for Populating the Menu "_Layout.cshml"

<header>
<nav ng-init="fillMenuController()" ng-controller="LayoutCtrl" class="navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header"></div>
    <script type="text/ng-template" id="treeMenu">
        <a class="dropdown-toggle" href="{{menu.URL}}" ng-attr-data-toggle="{{menu.URL == '#'?'dropdown':''}}">
            {{menu.LinkText}}
            <span ng-if="(MenuList | filter:{ParentCategoryID : menu.ID}).length > 0">
                <span class="caret"></span>
                <ul ng-hide="(MenuList | filter:{ParentCategoryID : menu.ID}).length == 0" class="dropdown-menu">
                    <li ng-repeat="x in MenuList | filter: {ParentCategoryID : menu.ID}">
                        <a href="{{x.URL}}">{{x.LinkText}}</a>
                    </li>
                </ul>
            </span>
        </a>
    </script>

    <div class="navbar-header"><a href="#"><img class="img-responsive AngularJS-small" src="~/Images/ACE.jpg" style="height: 40px; padding-top: 10px;" /></a></div>
    <ul class="nav navbar-nav">
        <li class="dropdown" ng-repeat="menu in MenuList | filter: {ParentCategoryID : 0}" ng-include="'treeMenu'" />
        <li id="btnLogOut"><a href="#">Log out</a></li>
    </ul>
</div>

Controller Code

app.controller("LayoutCtrl", function ($scope, LayoutService, common) {

    $scope.MenuList = [];

    $scope.fillMenuController = function () {
        var MenuMasterData = LayoutService.GetMenuMaster()
        MenuMasterData.then(function (response) {
            if (response.data.length == 0) { return; }
            $scope.MenuList = response.data;

        }, function (response) {
            if (response.data != null)
            {
                common.ShowMessage(response.data);
            }
        });
    }
});

app.service("LayoutService", function ($http) {

    this.GetMenuMaster = function () {
        var response = $http({
            method: 'get',
            url: "/Layout/GetMenuMaster",
            params: {},
            cache: true
        })
        return response;
    };
});

Database Code to populate the Dynamic Menu :

 public JsonResult GetMenuMaster()
        {
            SAPDataContext objSAPDataContext = new SAPDataContext();

            try
            {
                List<BE_Menu> lstMenu = new List<BE_Menu>
            {
                new BE_Menu { ID = 1, LinkText = "Activity", URL="/CRM/Activity/", ParentCategoryID = 0 },
                new BE_Menu { ID = 2, LinkText = "Business Partners", URL="/CRM/BusinessPartner/", ParentCategoryID = 0   },
                new BE_Menu { ID = 3, LinkText = "Sales", URL="#", ParentCategoryID = 0   },
                new BE_Menu { ID = 4, LinkText = "Sales Opportunities", URL="/Opportunity/OpportunityMaster", ParentCategoryID = 3   },
                new BE_Menu { ID = 5, LinkText = "Sales Quotation", URL="/CRM/SalesQuotation/", ParentCategoryID = 3  },
                new BE_Menu { ID = 6, LinkText = "Sales Order", URL="/CRM/SalesOrder/", ParentCategoryID = 3   },
                new BE_Menu { ID = 7, LinkText = "Delivery", URL="/CRM/Delivery/", ParentCategoryID = 0   },
                new BE_Menu { ID = 8, LinkText = "Service Call", URL="/CRM/ServiceCall/", ParentCategoryID = 0   },
                new BE_Menu { ID = 9, LinkText = "Customer Equipment Card", URL="/CRM/EquipmentCard/", ParentCategoryID = 0   }
            };

                return Json(lstMenu, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                objSAPDataContext.Dispose();
            }
        }

Now some inputs from my side just now I stumble upon this error : Unhandled exception at line 133, column 345 in http://localhost:36167/Scripts/AngularJS/angular.min.js

0x800a139e - JavaScript runtime error: [$rootScope:inprog] http://errors.angularjs.org/1.5.0/$rootScope/inprog?p0=%24diges

Answer 1

it was my mistake actually url of the page - path was in-correct, I have corrected using the right path. Thanks everyone for your help. It means alot to me.

app.service("LayoutService", function ($http) {

    this.GetMenuMaster = function () {
        var response = $http({
            method: 'get',
            url: "/Layout/GetMenuMaster",
            params: {},
            cache: true
        })
        return response;
    };
});

Answer 2

inside treeMenu script template, change ng-repeat loop variable name 'menu' to prevent naming errors with parent variable name 'menu'. name it something like 'submenu'