Ejemplo básico mouse over and mouse leave cambiar src imagen

by Fabian Allel

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div ng-app>
  <h2>Ejemplo</h2>
      <div ng-controller="TodoCtrl">
        <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>id</th>
                  <th>nombre</th>
                  <th>imagen</th>
                </tr>
              </thead>
              <tbody ng-repeat="element in collection">
                <tr>
                  <td>{{element.id}}</td>
                  <td>{{element.nombre}}</td>
                  <td><img style="width:200; height:200;" ng-mouseover="element.img='http://us.123rf.com/450wm/szefei/szefei1307/szefei130700204/21373878-suelo-de-madera-y-tropical-rainforest-paisaje-malasia-asia.jpg'" ng-mouseleave="element.img='http://html.hazunaweb.com/html/imagenes/prueba.jpg'" src="{{element.img}}"></td>
                </tr> 
              </tbody>
            </table>          
          </div>
        </div>
</div>

JavaScript

function TodoCtrl($scope) {
    
    $scope.collection=[{id: 1, nombre: 'nombre1', img: 'http://html.hazunaweb.com/html/imagenes/prueba.jpg'},
                      {id: 2, nombre: 'nombre2', img: 'http://html.hazunaweb.com/html/imagenes/prueba.jpg'},
                      {id: 3, nombre: 'nombre3', img: 'http://html.hazunaweb.com/html/imagenes/prueba.jpg'},
                      {id: 4, nombre: 'nombre4', img: 'http://html.hazunaweb.com/html/imagenes/prueba.jpg'},
                      {id: 5, nombre: 'nombre5', img: 'http://html.hazunaweb.com/html/imagenes/prueba.jpg'}];
    
    
    
}