Not scrolling to bottom of the page on adding new element - html

Question

On adding new element on the last child of my `container' on the time scroll appears. I'd like to scroll-down to put the new element on browser view.
I tried using '$anchorScroll` but that doesn't work.
HTML
<div class="galleryMenu">
<!-- <a class="live" ng-click="galleryMenu('live')" href="#">live</a>
<a class="visual" ng-click="galleryMenu('visual')" href="#">visuals</a> -->
<a class="projects" ng-click="galleryMenu('projects')" href="#">projects</a> //clicking and calling galleryMenu function
</div>
<!-- Focus needs to be applied here, height of element is 180px -->
<div class="appGallery" ng-show="galleryShow" id="anchor3">
<a ng-click="galleryChanger('prev')" class="prev" href="#">prev</a>
<a ng-click="galleryChanger('next')" class="next" href="#">next</a>
</div>
JS
"use strict";
angular.module("tcpApp")
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 180; //running here.
}])
.controller("homeController", ['$scope','server', '$anchorScroll', '$location', function ($scope, server, $anchorScroll, $location) {
$scope.galleryMenu = function (gallery) {
var newHash = 'anchor3';
if ($location.hash() !== newHash) {
$location.hash('anchor3');
} else {
$anchorScroll();
}
}]);