Flickering issue on mouseover dynamic menu in AngularJS

I’ve created a navigation menu out of a JSON, which flickers while hovering from one menu to another. For e.g., when I mouse over on ‘About Abc’ and then on ‘Offices’, there’s a strange flickering or blipping.

Unfortunately, I’m not able to reproduce it every time with this html.
In my actual code, I get the JSON by hitting a url.
How do I fix this blipping issue? Is it due to 500 ms delay that I’d added?

angular.module('myApp', []).controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {


 $scope.pageData = {
  "allChildList": [{
   "pageExist": true,
   "pageTitle": "About Abc",
   "pagePath": "http://www.yahoo.com",
   "openNewTab": true,
   "hideInTabletNav": true,
   "hideInMobileNav": true,
   "secondLevelChildList": [{
     "pageExist": true,
     "pageTitle": "News",
     "pagePath": "/content/myloc/about-Abc/news.html",
     "openNewTab": false,
     "thirdLevelChildList": [

     ],
     "multiple": true,
     "thirdLevelPageExist": true
    }, {
     "pageExist": true,
     "pageTitle": "Company",
     "pagePath": "/content/myloc/about-Abc/company.html",
     "openNewTab": false,
     "thirdLevelChildList": [{
      "pageExist": true,
      "pageTitle": "Strategy",
      "pagePath": "/content/myloc/about-Abc/company/strategy.html",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Mission Vision Values",
      "pagePath": "/content/myloc/about-Abc/company/missionvisionvalues.html",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Leadership",
      "pagePath": "/content/myloc/about-Abc/company/leadership.html",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Org Chart",
      "pagePath": "http://mysite/pages/OrgChart.aspx",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Corporate Responsibility",
      "pagePath": "http://myloc2/who/global-impact",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "History",
      "pagePath": "https://usa.Abc.com/about-Abc/our_business/history-of-Abc.html",
      "openNewTab": true
     }, {
      "pageExist": true,
      "pageTitle": "Products",
      "pagePath": "http://myloc2/who/products",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Investor Info",
      "pagePath": "http://investor.Abc.com/",
      "openNewTab": true
     }, {
      "pageExist": true,
      "pageTitle": "View All",
      "pagePath": "/content/myloc/about-Abc/company/view-more.html",
      "openNewTab": false
     }],
     "multiple": true,
     "thirdLevelPageExist": true
    }, {
     "pageExist": true,
     "pageTitle": "Community",
     "pagePath": "/content/myloc/about-Abc/community.html",
     "openNewTab": false,
     "thirdLevelChildList": [{
      "pageExist": true,
      "pageTitle": "Diversity + Inclusion",
      "pagePath": "/content/myloc/about-Abc/community/diversity-and-inclusion.html",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Giving Back",
      "pagePath": "http://myloc2/working/giving-back/Pages/default.aspx",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Ideas Community",
      "pagePath": "/content/myloc/about-Abc/initiatives/ideas.html",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Other Communities",
      "pagePath": "http://myloc2/working/get-involved/Pages/default.aspx",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "View All",
      "pagePath": "/content/myloc/about-Abc/community/view-all-community.html",
      "openNewTab": false,
      "hideInDesktopNav": true
     }, {
      "pageExist": true,
      "pageTitle": "myloc Transformation",
      "pagePath": "/content/myloc/about-Abc/community/transformation.html",
      "openNewTab": false
     }, {
      "pageExist": true,
      "pageTitle": "Calendar",
      "pagePath": "/content/myloc/about-Abc/community/Calendar.html",
      "openNewTab": false
     }],
     "multiple": true,
     "thirdLevelPageExist": true
    },

   ],
   "columnClass": "0",
   "multiple": true,
   "secondLevelPageExist": true
  }, {
   "pageExist": true,
   "pageTitle": "Offices",
   "pagePath": "http://www.yahoo.com",
   "openNewTab": true,
   "hideInDesktopNav": true,
   "hideInTabletNav": true,
   "hideInMobileNav": true,
   "secondLevelChildList": [{
    "pageExist": true,
    "pageTitle": "Locations",
    "pagePath": "/content/myloc/offices/locations.html",
    "openNewTab": false,
    "thirdLevelChildList": [{
     "pageExist": true,
     "pageTitle": "Ashburn",
     "pagePath": "/content/myloc/offices/locations/ashburn.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Austin",
     "pagePath": "/content/myloc/offices/locations/austin.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Bangalore",
     "pagePath": "/content/myloc/offices/locations/bangalore.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Denver",
     "pagePath": "/content/myloc/offices/locations/denver.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Dubai",
     "pagePath": "/content/myloc/offices/locations/dubai.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Foster City",
     "pagePath": "/content/myloc/offices/locations/foster-city.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "San Francisco",
     "pagePath": "/content/myloc/offices/locations/san-francisco.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Miami",
     "pagePath": "/content/myloc/offices/locations/miami.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Singapore - Singpost",
     "pagePath": "/content/myloc/offices/locations/singapore-singpost.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Singapore - Robinson Road",
     "pagePath": "/content/myloc/offices/locations/singapore-robinson-road.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "View All",
     "pagePath": "http://myloc.trusted.Abc.com/content/myloc/offices/locations.html",
     "openNewTab": true
    }],
    "multiple": true,
    "thirdLevelPageExist": true
   }, {
    "pageExist": true,
    "pageTitle": "Quick Links",
    "pagePath": "/content/myloc/offices/quick-links.html",
    "openNewTab": true,
    "hideInDesktopNav": true,
    "hideInMobileNav": true,
    "thirdLevelChildList": [{
     "pageExist": true,
     "pageTitle": "Copy Centers",
     "pagePath": "/content/myloc/offices/quick-links/copy-centers.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Floor Maps",
     "pagePath": "/content/myloc/offices/quick-links/floor-maps.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "Food Services",
     "pagePath": "/content/myloc/offices/quick-links/food-services.html",
     "openNewTab": false
    }, {
     "pageExist": true,
     "pageTitle": "View All",
     "pagePath": "/content/myloc/offices/quick-links/view-all.html",
     "openNewTab": false
    }],
    "multiple": true,
    "thirdLevelPageExist": true
   }, {
    "pageExist": true,
    "pageTitle": "Facilities Help",
    "pagePath": "/content/myloc/offices/facilities-help.html",
    "openNewTab": false,
    "thirdLevelChildList": [{
     "pageExist": true,
     "pageTitle": "Submit Request",
     "pagePath": "http://servicerequest",
     "openNewTab": true
    }, {
     "pageExist": true,
     "pageTitle": "View All",
     "pagePath": "/content/myloc/offices/facilities-help/view-all-facilities-help.html",
     "openNewTab": false,
     "hideInDesktopNav": true
    }],
    "multiple": true,
    "thirdLevelPageExist": true
   }, {
    "pageExist": true,
    "pageTitle": "View All",
    "pagePath": "/content/myloc/offices/view-all-offices.html",
    "openNewTab": false,
    "hideInDesktopNav": true,
    "thirdLevelChildList": [

    ],
    "thirdLevelPageExist": false
   }],
   "columnClass": "3",
   "multiple": true,
   "secondLevelPageExist": true
  }, {
   "pageExist": true,
   "pageTitle": "Functions",
   "pagePath": "https://www.google.com",
   "openNewTab": true,
   "hideInDesktopNav": true,
   "hideInTabletNav": true,
   "hideInMobileNav": true,
   "secondLevelChildList": [

   ],
   "columnClass": "1",
   "multiple": true,
   "secondLevelPageExist": true
  }, {
   "pageExist": true,
   "pageTitle": "My HR",
   "pagePath": "/content/myloc/my-hr.html",
   "openNewTab": false,
   "secondLevelChildList": [

   ],
   "columnClass": "1",
   "multiple": true,
   "secondLevelPageExist": true
  }, {
   "pageExist": true,
   "pageTitle": "Tools",
   "pagePath": "/content/myloc/tools.html",
   "openNewTab": true,
   "secondLevelChildList": [

   ],
   "columnClass": "1",
   "multiple": true,
   "secondLevelPageExist": true
  }]
 };
 $scope.showDiv = function(obj) {

  $timeout(function() {
   obj.hovering = true;
  }, 500);
 };
 $scope.hideDiv = function(obj) {
  $timeout(function() {
   obj.hovering = false;
  }, 500);
 };

}]);

.hiding-div{
        display: inline-block;
        padding: 10px;
        margin: 10px;
}

.menu-link{
        text-decoration: none;
}

.menu-link:hover{
        color: #AB09AF;
}

.farm-links{
        position: absolute;
        top: 50px;
        height: 400px;
        width: 700px;
        border: 1px solid lightgrey;
        padding: 5px;
        display: flex;
        word-wrap: flex;
        column-count: 4;
}


.groups-links{
        display: inline-block;
        margin-right: 60px;

}

.group-title{
        color: grey;
        text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<nav ng-app="myApp" ng-controller="myCtrl" class="nav">
  <div class="nav-center">
    <!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
    <div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseenter="showDiv(obj)" ng-mouseleave="hideDiv(obj)" >
      <div>
        <a ng-href="" class="main-link multiple menu-link"></a>
        <!--<span class="main-link mobile" aria-labelledby="" aria-expanded="false"></span>-->
        <!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">-->
        <div class="farm-links" ng-show="obj.hovering">
          <!--<a class="prev-link" aria-labelledby=""></a>-->
          <div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
            <a ng-href="" class="group-title"></a>
            <!--<span class="group-title mobile" aria-expanded="false"></span>-->
            <ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
              <li class="second-link">
                <a ng-href=""></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/05/flickering-issue-on-mouseover-dynamic-menu-in-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com