Bestin John Bestin John - 9 days ago 11x
CSS Question

AngularJS Error: [$injector:unpr] Unknown provider: $achorScrollProvider <- $achorScroll <- MainController

I am trying to build a custom service in AngularJS. It is throwing some error which I am not able to understand since I am new to AngularJS.

I saw a similar question in StackOverflow but the solution to that is not solving my problem(solution).

This is the console error during execution of the program:

angular.js:13920 Error: [$injector:unpr] Unknown provider: $achorScrollProvider <- $achorScroll <- MainController$injector/unpr?p0=%24achorScrollProvider%20%3C-%20%24achorScroll%20%3C-%20MainController
at angular.js:68
at angular.js:4511
at Object.getService [as get] (angular.js:4664)
at angular.js:4516
at getService (angular.js:4664)
at injectionArgs (angular.js:4688)
at Object.invoke (angular.js:4710)
at $controllerInit (angular.js:10354)
at nodeLinkFn (angular.js:9263)
at compositeLinkFn (angular.js:8620)

HTML code:

<!DOCTYPE html>
<html ng-app="githubViewer">

<script data-require="angular.js@*" data-semver="1.5.8" src=""></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="github.js"></script>

<body ng-controller="MainController">

<form name="searchUser" ng-submit="search(username)">
<input type="seach" placeholder="User to find" ng-model="username" required>
<input type="submit" placeholder="Search" >

<div ng-include="'userDetails.html'" ng-show="user">




// Code goes here
(function() {

var app = angular.module("githubViewer", []);

var MainController = function($scope, $github, $interval, $log, $anchorScroll, $location) {

var onRepo = function(data) {
$scope.repos = data;

/* var onUserComplete = function(response) {
$scope.user =;

var onUserComplete = function(data) {
$scope.user = data;
$github.getRepos($scope.user).then(onRepo, onError);

var onError = function(reason) {
$scope.error = "Error fetching data";

$ = function(username) {
$"search for " + username);
$github.getUser(username).then(onUserComplete, onError);
if (countDownInterval) {
$scope.countdown = null;


var decrementCountdown = function() {
if ($scope.countdown === 0) {

var countDownInterval = null;

function startCountDown() {
countDownInterval = $interval(decrementCountdown, 1000, $scope.countdown);

$scope.username = "angular";
$scope.message = "GitHub Viewer";
$scope.repoSortOrder = "-stargazers_count";
$scope.countdown = 5;

//written like this incase of minification

//normal method
app.controller("MainController", MainController);

MainController.$inject = ['$scope', 'github', '$interval', '$log', '$achorScroll', '$location'];




var github=function($http){

var getUser=function(username){

return $http.get(""+username).then(function(response){


var getRepos=function(user){

return $http.get(user.repos_url).then(function(response){




var module=angular.module("githubViewer");



I am attaching plunk of my code:plunk


You have missed an n in your $anchorScroll. (It was mentioned as $achorScroll in your code.)

After correcting it, the code seems to be running fine.

Here is the updated/working plunker URL :

Hope this helps!