title: AngularJS: ng-mouseOver on touch screens
body: <p>i have the following:</p>
  
  <p><a href="http://plnkr.co/edit/3AYRXUfbaT1VebN3J7uB?p=preview" rel="nofollow noreferrer">Plunker</a></p>
  
  <p><img src="https://i.stack.imgur.com/W0Jy6.png" alt="enter image description here"></p>
  
  <p>On mouse over anyone of the black Cubes it's number is passed to the red Cube </p>
  
  <p>but it doesn't work for touch screens.</p>
  
  <p>i need the user to be able to move his finger from cube to cube (without picking his finger up). and every time his finger touches a black cube, to update the red cubes number.</p>
  
  <p>P.B: the cubes size and position will be generated dynamically. </p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div class="main" ng-mouseover="setSelected(1)"&gt;
       &lt;div style="display: table-cell; vertical-align: middle;"&gt;
          &lt;div class="num"&gt;1&lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;div class="main" ng-mouseover="setSelected(2)"&gt;
       &lt;div style="display: table-cell; vertical-align: middle;"&gt;
          &lt;div class="num"&gt;2&lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;div class="main" ng-mouseover="setSelected(3)"&gt;
       &lt;div style="display: table-cell; vertical-align: middle;"&gt;
          &lt;div class="num"&gt;3&lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div class="selected" style=""&gt;
      &lt;div style="display: table-cell; vertical-align: middle;"&gt;
         &lt;div class="num"&gt;Selected&lt;/div&gt;
         &lt;BR /&gt;
         &lt;div class="num"&gt;{{selected}}&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  var app = angular.module('plunker', []);
  
        app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
          $scope.selected = '00';
  
  
          $scope.setSelected = function(num){
          $scope.selected = num;
        }
    });
  </code></pre>
  
  <p>Thank's</p>
  
  <p>Avi</p>