How to use ng-mouseover for hide and show input element on mouse hover

Question

Here is my code:-

<div class="input-group">
    <input class="form-control" ng-model="name" required />
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button" >
               <i class="fa fa-plus"></i>
        </button>
    </span>
</div>

Here I am using bootstrap class input-group which contains two elements i.e <input> and <span>
So here I want to show that button on mouse hover.
So I tried by using ng-mouseover

<span class="input-group-btn">
     <button class="btn btn-primary" type="button" ng-mouseover="open" >
            <i class="fa fa-plus"></i>
     </button>
</span>

Where open is :-

$scope.open = true;

I think ng-mouseover is better option but if is there any other simple way.... please tell me

Answer 1

var app = angular.module("testApp", []);

app.controller('testCtrl', function($scope){
  $scope.open = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <div ng-mouseover="open = true" ng-mouseleave="open = false">
    To display button mouseover here!!!
    <button class="btn btn-primary" type="button" ng-show="open">
      <i class="fa fa-plus">Button</i>
    </button>
  </div>  
</div>

try this. also you can use :hover for show/hide element.

<button class="btn btn-primary" type="button" ng-show="open" ng-mouseover="open = true" >
  <i class="fa fa-plus"></i>
</button>