Scrolling to specific element on different template after clicking link (Angularjs)

Question

Hey guys I am pretty new to Angular.

Users can edit profile settings in profileSettings page.

I have the following on my profile template:

Answer 1

Use the optional onEnter callback which will be called when profileSettings state becomes active to render those two functions :

• $location.hash('hashValue') will take to the element with id="hashValue" url like : /profileSettings.html#hashValue
• $anchorScroll will scrolls to that element

So your code may look like this:

$stateProvider.state('profileSettings', {
  url: '/settings',
  template: 'settings.html',
  controller: 'ProfileSettingsCtrl',
  onEnter: function(){
      $location.hash('hashValue');
      $anchorScroll();
  }
});

Note: Remember to add $location and $anchorScrollto your dependencies.