$anchorScroll after div is created

Question

I've got a problem using $anchorScroll. I've got a div with an ng-ig condition that isn't visible at the beginning. I need use the $anchorScroll function to go in that div when a button is clicked. This button also make the div visible. Right now doesn't work because i think it fires the $anchorScroll before the div is created. This is the code:

<body ng-app="testApp"  data-ng-controller="searchController as searchCtrl" >

  <div id="scrollArea">
      <form>
         //HTML input elements

         <div class="buttons">
             <md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
             {{searchCtrl.test}}
         </div>
      </form>
  </div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <!-- Smart Table for displaying result -->
  <div id="resultTable" class="rtable">
    <div ng-if="searchCtrl.test == true" >
      //table content
    </div>
  </div>

</body>

and the angular part

var app = angular.module('testApp', []);

app.controller("searchController", function($scope, $location, $anchorScroll, $timeout){
    var self = this;
    self.test = false;

 self.gotoTable = function(resultTable) 
    {
      self.test = true;
      self.anchor(resultTable);
    };

  self.anchor = function(resultTable) {
    $location.hash('resultTable');
    $anchorScroll();
  } ; 
});

Plunker: http://plnkr.co/edit/HrdN2ZACDui61l1kPHEj?p=preview

Thanks

It's not going to that point because when you call `$location.hash` it's reloading the page, when you click it the second time it works because it doesn't have to change the page. I don't know how to fix it but hopefully this will help you to search for an answer. If you have routes [this answer](http://stackoverflow.com/questions/21701675/change-pages-location-hash-in-angularjs-app-without-page-reloading) may be of use — George, Mar 23 '17 at 09:23
@sameer I don't understand what you changed.. You just removed some
? — Atlas91, Mar 23 '17 at 09:25

score 1 · Answer 1 · answered Mar 23 '17 at 09:29

After playing around with your plunker, I've found that updating angularJs for the latest version fixed the problem. I don't know if you can update your angular version?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

$anchorScroll after div is created

1 Answers1