angularJS Custom directive functionality works using ng-click but not using ng-mouseOver

Requirement goes like this :- I have left navigation panel which has to be in sync with the items added in the main active view by the user and has to display in tree structure. Basic idea is to provide context aware sub-view that change based on active view.

Custom directive used to display tree structure: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree/blob/master/src/abn_tree_directive.js

my HTML code: (using ng-click)

<div class="add-data-request-panel" style="min-height:1071px;" 
     ng-click="expandPanel()"> 
  <ul>
    <li class="icon-drd icon-drd-diactive" ng-if="panelCollapse" ></li>
    <li class="icon-pie-chart icon-pie-active" ng-if="panelCollapse"></li>
    <li class="icon-publish-req" ng-if="panelCollapse"></li>
    <li class="icon-view-changes" ng-if="panelCollapse"></li>
  </ul>
</div>
        
<div class="data-slider-panel" style="min-height:1071px;display" ng-if="panelExpand">
   <div class="data-slider-row mtop" ng-click="collapsePanel()">
      <div class="slider-row-left">
         <span class="first-char" >S</span>
         <span class="second-char">ection</span>
      </div>
      <div class="slider-row-right">
         <div class="icon-drd icon-drd-diactive">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
         Section2
         <div class="sub-slider-row-left">
            <abn-tree tree-data="mainArrayObj"></abn-tree> // passing data to tree directive
         </div>
      </div>
      <div class="slider-row-right">
         <div class="icon-pie-chart icon-pie-active">
         </div>
      </div>
   </div>
   <div class="data-slider-row" ng-click="collapsePanel()">
      <div class="slider-row-left">
         Section3
      </div>
      <div class="slider-row-right">
         <div class="icon-publish-req">
         </div>
      </div>
   </div>
   <div class="data-slider-row" ng-click="collapsePanel()">
      <div class="slider-row-left">
         Section4
      </div>
      <div class="slider-row-right">
         <div class="icon-view-changes">
         </div>
      </div>
   </div>
</div>

JS implementation in my controller

$scope.panelExpand = false;  //setting default flag
$scope.panelCollapse = true; //setting default flag


$scope.expandPanel = function() {
 $scope.panelExpand = true;
 $scope.panelCollapse = false;
 $scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
 initialJsonSeparator($scope.model.Data); // method used for iteration
};

$scope.collapsePanel = function() {
 $scope.panelExpand = false;
 $scope.panelCollapse = true;
};

my HTML code: (using ng-mouseover which is not working and displaying the data passed to navigation bar)

<div class="add-data-request-panel" style="min-height:1071px;" ng-mouseover="hoverIn()" 
   ng-mouseleave="hoverOut()">
   <ul>
      <li class="icon-drd icon-drd-diactive"></li>
      <li class="icon-pie-chart icon-pie-active"></li>
      <li class="icon-publish-req"></li>
      <li class="icon-view-changes"></li>
   </ul>
</div>

<div class="data-slider-panel" style="min-height:1071px;display"
   ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-show="hoverEdit">
   <div class="data-slider-row mtop">
      <div class="slider-row-left">
         <span class="first-char">S</span>
         <span class="second-char">ection1</span>
      </div>
      <div class="slider-row-right">
         <div class="icon-drd icon-drd-diactive">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
         Section2
         <div class="sub-slider-row-left">
            <abn-tree tree-data="mainArrayObj"></abn-tree> // array that holds the data passed in html to custom directive
         </div>
      </div>
      <div class="slider-row-right">
         <div class="icon-pie-chart icon-pie-active">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
          Section3
      </div>
      <div class="slider-row-right">
         <div class="icon-publish-req">
         </div>
      </div>
   </div>
   <div class="data-slider-row">
      <div class="slider-row-left">
         Section4
      </div>
      <div class="slider-row-right">
         <div class="icon-view-changes">
         </div>
      </div>
   </div>
</div>

js Implementation for the ng-mouseOver: (while debugging all the iteration and methods executed as expected)

$scope.hoverIn = function() {
 this.hoverEdit = true;
 $scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
 initialJsonSeparator($scope.model.Data); //method used to iterate the data
};

$scope.hoverOut = function() {
 this.hoverEdit = false;
};

Any solution to this issue would be of gr8 help. If there is any other better approach to implement the ng-mouseOver and ng-mouseLeave, please do let me know.