ngResource

<!DOCTYPE html>
<html>
<head>
  <style>
div.out { width:40%; height:120px; margin:0 15px;
          background-color:#D6EDFC; float:left; }
div.in {  width:60%; height:60%;
          background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
 
<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
 
 <span id="current">Current: <i></i></span>
<script>
  var i = 0;
  $("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
    $('#current i').text('mouse over');
  }).mouseout(function(){
    $('#current i').text('mouse out');
    $(this).find("span").text("mouse out ");
  });
 
  var n = 0;
  $("div.enterleave").mouseenter(function() {
    n += 1;
    $(this).find("span").text( "mouse enter x " + n );
    $('#current i').text('mouse enter');
  }).mouseleave(function() {
    $('#current i').text('mouse leave');
    $(this).find("span").text("mouse leave");
  });
 
</script>
 
</body>
</html>

var app = angular.module('plunker', ['ngResource'])
  .controller('MyController', 
    function($scope, $resource) {
      var User = $resource(
        '/users/:action',
        {},
        {
          names:{
            method:'GET', 
            params:{action:'names'}
          }
        }
      );
      
      $scope.users = User.get();
      $scope.names = User.names();
    }  
  );