{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/12098","labels_url":"https://api.github.com/repos/angular/angular.js/issues/12098/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/12098/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/12098/events","html_url":"https://github.com/angular/angular.js/issues/12098","id":87711912,"number":12098,"title":"$animate.enter callback firing before element is fully inserted","user":{"login":"Foxandxss","id":1087957,"avatar_url":"https://avatars.githubusercontent.com/u/1087957?v=3","gravatar_id":"","url":"https://api.github.com/users/Foxandxss","html_url":"https://github.com/Foxandxss","followers_url":"https://api.github.com/users/Foxandxss/followers","following_url":"https://api.github.com/users/Foxandxss/following{/other_user}","gists_url":"https://api.github.com/users/Foxandxss/gists{/gist_id}","starred_url":"https://api.github.com/users/Foxandxss/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Foxandxss/subscriptions","organizations_url":"https://api.github.com/users/Foxandxss/orgs","repos_url":"https://api.github.com/users/Foxandxss/repos","events_url":"https://api.github.com/users/Foxandxss/events{/privacy}","received_events_url":"https://api.github.com/users/Foxandxss/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-06-12T12:15:33Z","updated_at":"2015-06-12T12:15:33Z","closed_at":null,"body":"Hello, I have this weird issue in foxandxss/angular-toastr#109. Not sure if the problem is mine or from angular.\r\n\r\nI have this directive:\r\n\r\n```javascript\r\n.directive('foo', function() {\r\n  return {\r\n    templateUrl: 'template.html',\r\n    link: function(scope) {\r\n      scope.init = function() {\r\n        console.log('here');\r\n      };\r\n    }\r\n  };\r\n})\r\n```\r\n\r\nAnd I build it by hand in a service, something along this lines:\r\n\r\n```javascript\r\nvar fooObj = {};    \r\nfooObj.scope = $scope.$new();    \r\nfooObj.el = $compile('<foo></foo>')(fooObj.scope);\r\n```\r\n\r\nThen I insert it in the dom like:\r\n\r\n```javascript\r\nvar body = $document.find('body').eq(0);\r\n\r\n$animate.enter(fooObj.el, body).then(function() {\r\n  fooObj.scope.init();\r\n});\r\n```\r\n\r\nI would expect the callback function on `$animate.enter` to fire once the directive is fully inserted on the body and initialized. Since it has to fetch the `template.html` remotely, the callback will fire before the `link` function is even called, so I get a `fooObj.scope.init` is not a function (normal, it isn't set yet).\r\n\r\nIf you call it a second time (template is now cached), it works as expect, the callback function will be called once the link function is called so you can see the \"here\" on the console.\r\n\r\nIf I cache my template on the first place, it works.\r\n\r\nCheck the plunker: http://plnkr.co/edit/VMsKm5ATEC7rGKQz0gBY\r\n\r\nRemove the comments to see it working without problems.\r\n\r\nThoughts?"}}