hide a child element on mouseout of parent DIV - AngularJs

Question

HTML -

<div class="col-md-3" ng-repeat="idea in ideas">
    <div class="col-md-12 ideaResult" ng-mouseleave="hideIcon()">         
                <a class="resultCover col-md-12" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.coverImage}});"></a>    
                <div class="sharebtn icon-btn" ng-click="socialIcon = !socialIcon">  
                        <span style="background-image:url('/images/idea/share-add.png');background-color:white" title="Share" class="iconContainer"></span>
                </div>
                <div class="share-fb share-icon" ng-show="socialIcon">              
                        <span class="iconContainer" title="Share" style="background-image:url('/images/idea/fb-icon.png');background-color:white"></span>
                </div>
                <div class="share-tw share-icon" ng-show="socialIcon">
                        <span class="iconContainer" title="Share" style="background-image:url('/images/idea/twitter-icon.png');background-color:white"></span>
                </div>
                <div class="share-msg share-icon" ng-show="socialIcon">     
                        <span class="iconContainer" title="Share" style="background-image:url('http://cdn.thegadgetflow.com/wp-content/themes/thegadgetflow4/images/email-icon.png');background-color:white"></span>
                </div>  
                <div class="endorse-icon icon-btn">      
                        <span style="background-image:url('/favicons/favicon-96x96.png');background-color:white" title="Endorse" class="iconContainer"></span>
                </div> 
                <div class="resultIcon">
                    <span title="my goal" class="iconContainer" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.goalIcon}});background-color:{{idea.backgroundColor}}">
                    </span>    
                </div>
                <h2 class="resultName"><a href="/{{idea.customUrl}}">{{idea.title}}</a></h2>                      
                <div class="col-md-12 resultDescription"><p>{{idea.description | limitTo: 48}}{{idea.description.length > 48 ? '...' : ''}}<a href="/{{idea.customUrl}}">Continue Reading</a></p></div>                        
            </div>
 </div>

Controller JS -

$scope.hideIcon = function(){ 
    $scope.socialIcon = false;       
};

Requirement -

I want to hide the DIVs with "share-icon" class when mouse pointer go out of the parent DIV(i.e. DIV with class ideaResult), but at the same time I click on the DIV with class name "shareBtn" which will result in toggling those three DIVs with "share-icon" class which is working fine.

Problem -

When the page is loaded, these three DIVs (ie. "share-icon" class) are already hidden which is fine but when I click on the DIV with class "shareBtn", these DIVs appear which is also fine, but when mouse pointer goes out of the parent DIV ("ideaResult"), these three DIVs continues to be appear which I don't want.

Can someone help me to solve this problem ? Thanks in advance

Here is the Mock Fiddle - https://jsfiddle.net/x2zzppoa/

Answer 1

The visibility on those 3 divs isn't related to the class "share-icon", but to $scope.socialIcon, whitch initialy is set to undefined, and after you click the upper div it is set to true, hence the visibility of your divs.

The solution for this code snippet is probably:

ng-mouseleave="socialIcon = false"

https://jsfiddle.net/ronapelbaum/x2zzppoa/1/