How to add animation to new objects being pushed into DOM in AngularJS? <p>I am trying to add animation to new objects being pushed into an array in a service which the controller is listening to and is then adds it to the view using ng-repeat. How can I add animation instead of having the new object just appear?</p> <p>Here is my code for my view, controller, and service.</p> <p>View:</p> <pre><code>&lt;div&gt; &lt;h3&gt;Add a quote:&lt;/h3&gt; &lt;input type="text" ng-model="newQuote.text" placeholder="Quote..."&gt; &lt;input type="text" ng-model="newQuote.author" placeholder="Author..."&gt; &lt;button ng-click="addQuote()"&gt;Add&lt;/button&gt; &lt;/div&gt; &lt;h1&gt;Quotes&lt;/h1&gt; &lt;div ng-repeat="thisData in someData | filter:searchThis"&gt; &lt;div id="{{thisData.id}}" class="quotes"&gt; &lt;p class="quote"&gt;"{{thisData.text}}"&lt;br&gt;-{{thisData.author}}&lt;/p&gt; &lt;button class="deleteButton" ng-class="{on:state}" ng-click="deleteQuote(thisData.text)"&gt;X&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Controller:</p> <pre><code>$scope.getData = function(){ $scope.someData = dataService.getData() } $scope.getData() $scope.newQuote = {} $scope.addQuote = function(){ dataService.addData($scope.newQuote) $scope.newQuote = "" } </code></pre> <p>Service:</p> <pre><code>var quotes = [ { id: 0, text: 'Life isn\'t about getting and having, it\'s about giving and being.', author: 'Kevin Kruse'}, { id: 1, text: 'Whatever the mind of man can conceive and believe, it can achieve', author: 'Napoleon Hill'}, { id: 2, text: 'Strive not to be a success, but rather to be of value.', author: 'Albert Einstein'}, { id: 3, text: 'Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference.', author: 'Robert Frost'}, { id: 4, text: 'The most difficult thing is the decision to act, the rest is merely tenacity.', author: 'Amelia Earhart'}, { id: 5, text: 'Life is what happens to you while you\'re busy making other plans.', author: 'John Lennon'}, { id: 6, text: 'What even is a jQuery?', author: 'Tyler S. McGinnis'} ]; this.getData = function(){ return quotes } this.addData = function(someObj){ if (someObj.text &amp;&amp; someObj.author){ quotes.unshift(someObj) } else { return "Error" } } </code></pre>