Question: I've seen a lot of answers to this question using jQuery. Like this:
[Stop a gif animation onload, on mouseover start the activation](https://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation) and [Animating a gif on hover](https://stackoverflow.com/questions/7473117/animating-a-gif-on-hover).
But I'm looking for a way to do it with angular. I'm thinking it should be the same idea as when doing it in jQuery. I want to do exactly what the person who asked the question in the first link wanted to do, but in angular: 

1. On page load => Animations for all gifs are stopped
2. On mouseover => Animations starts for that one gif
3. On mouseout => Animation stops again for that gif

Here's what I have in my HTML:

```
<img class="projectGif" src="{{project.gifUrl}}" ng-mouseover="animation(project)">

```

The "project" object that I'm passing into the animation function is an object I'm getting earlier in my code from ng-repeat="project in projects". Then in my JavaScript: 

```
$scope.animation = function(project) {
    //not sure what to do here
};

```

I looked around on the angular documentation page for something similar to the jQuery `$(this).attr()`, and found stuff like $attr, and $set, and I thought maybe I could just use those to set the src in my img tag to the pathway for my img. So like `$set('src', 'project.imgUrl')` but I get an error in my console that says `$set is not defined`. 

So my main question is, how do I use angular to make it so that my web page starts with a static .gif (or img etc) and then on hover, have the static .gif change to an animated .gif?

Answer: 
In pure HTML

```
<img  ng-repeat="project in vm.projects"
      ng-src="{{project.gifUrl}}"
      ng-init="project.gifUrl=project.staticUrl"
      ng-mouseover="project.gifUrl=project.dynamicUrl"
      ng-mouseleave="project.gifUrl=project.staticUrl">

```

Or a mixed solution:

HTML

```
<div ng-controller="myController as vm">
    <img ng-repeat="project in vm.projects"
         ng-src="{{project.gifUrl}}"
         ng-init="project.gifUrl=project.staticUrl"
         ng-mouseover="vm.setDynamic($index)"
         ng-mouseleave="vm.setStatic($index)">
</div>

```

JS

```
var vm = this;
vm.setDynamic = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].dynamicUrl; 
};
vm.setStatic  = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].staticUrl; 
};

```

Notice that I am using the `$index` special property of the `ng-repeat` directive. For more information on `ng-repeat` and `$index`, see the [AngularJS ngRepeat API Docs](https://docs.angularjs.org/api/ng/directive/ngRepeat)
Using the technique from [Animating a gif on hover](https://stackoverflow.com/questions/7473117/animating-a-gif-on-hover), create a [directive](https://docs.angularjs.org/guide/directive) to which you provide both the url for the static gif and the animated gif, and then make it toggle between the two images on mouseover.

You can also use the technique describe in [Extending Angular Directive](https://stackoverflow.com/questions/17005122/extending-angular-directive)

Once you've created the directive, your html could look something like

`<img ng-src="{{project.staticUrl}}" custom-src-on-mouseover="{{project.gifUrl}}">`