stop a function when I access another state

I have two controllers. a page called page1 and another called page2. on page1 I have a code that runs an animation.I have a function that calls itself infinitely. in this line.

.each(‘end’, tick) when the animation ends, it start tick() again.

function tick(){
 console.log("hello");
 .
 .
 .
//line 190
 paths.attr('transform', null)
 .transition()
 .duration(duration)
 .ease('linear')
 .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
 .each('end', tick) //when the transition ends, it start tick() again
}

This is fine, because it is an infinite animation. I put console.log(“hello”) in the tick function, then every time this function is executed, the word “hello” is written to the console. so far so good !. when I change the controller, ie when I click to go to page2, my previous animation is still running, and I can still see the console.log(“hello”) of the function that is in my first controller.

How can I stop this function when I change controller?

this is my code:

http://plnkr.co/edit/66cK7gWTNQNh4vmC2lmp?p=preview

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/14/stop-a-function-when-i-access-another-state/
via @lzomedia #developer #freelance #web #lzomedia.com