AngularJS Controller Not Instantiating

I am using AngularJS on my app. I've never had any troubles working with Angular in the past and I have worked with it many times. But this is just boggling me. I have the module declared and it is working fine, but my controller fails to work at all. Here is the entirety of the code on my page:


<!DOCTYPE html>
<html lang="en">
<head ng-app="torch">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Torch</title>

    <link href="/compiled/css/app.css" rel="stylesheet">
    <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>


    <div class="container-fluid">
        <div class="row">
            <div id="sidebar" class="col-sm-3 col-lg-2">
                <ul class="list-group">
            <li class="list-group-item"><a id="page_manager" title="Pages" href="http://***.***.***/admin/pages"  >Pages</a></li>
    </ul>
            </div>
            <div id="content" class="col-sm-9 col-lg-10">
                <h1>Pages</h1>
                <div ng-controller="what">
    { { test } }
</div>
            </div>
        </div>
    </div>


    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var App = angular.module('torch', []);
    </script>
        <script>
        console.log(App);
        
        App.controller('what', ['$scope', function($scope){
            $scope.test = 'WHAT THE HECK?!';
            console.log('hello2');
        }]);
    </script>
</body>
</html>

The App var gets logged to the console fine
{ { test } } never gets interpolated and shows up as { { test } } on the web page
'hello2' never gets output to the console

Please note that I injected spaces into { { test } } so that it would show on this forum.

I am sure this is probably something super stupid like a missing comma or semicolon, but I have been working on this for hours and am officially whooped. Also, no errors are output to the console.

SP1966

10 years ago

Best Answer

Level 4

You declared your ng-app on the head which limits it's scope to just the head and puts your controller outside the scope of the app. Place the ng-app either in the body tag or the html tag and you should be good to go.

pstephan1187

10 years ago

Level 7

Thanks, @SP1966! It's always those simple things.

SP1966

10 years ago

Level 4

You're welcome! It's nice to occasionally be able to help rather than always the guy looking for help!! :)

Please or to participate in this conversation.