CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
AHCo
AHCo

Reputation: 109

Why is my AngularJS $scope not working?

I am very very new to Angular and still very much a newbie to Javascript. I followed a tutorial, but the result is not working in my project.

Tutorial: http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day

HTML

<!DOCTYPE html>
<html ng-app="soCLean">
    <head></head>
    <body ng-controller="soCleanLandingPage">
        <div>
            <p>{{locale}}</p>
            <p>{{type}}</p>
            <p>{{service}}</p>
            <p>{{serviceSingle}}</p>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
        <script>
                var soClean = angular.module('soClean', []);
                    soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
                        $scope.locale = 'vancouver';
                        $scope.type = 'residential';
                        $scope.service = 'pressure washing';
                        $scope.serviceSingle = 'pressure wash';
                }]);
        </script>
    </body>
</html>

I have removed all extra stuff from the code sample above, but I should advise that I am also pulling two fonts and jQuery from Google CDN, and have a couple local jQuery plugins.

I am also using a few external CSS files. The page in its entirety can be found at here.

PLease help me understand what I am doing wrong and why this is not working. Thanks.

Upvotes: 2

Views: 8041

Answers (1)

Craig Squire
Craig Squire

Reputation: 2141

It's a casing problem. Fix your ng-app attr to "soClean" instead of "soCLean".

http://plnkr.co/edit/ASWTQK9M4LfEhlpsbG9y?p=preview

<!DOCTYPE html>
<html ng-app="soClean">
    <head></head>
    <body ng-controller="soCleanLandingPage">
        <div>
            <p>{{locale}}</p>
            <p>{{type}}</p>
            <p>{{service}}</p>
            <p>{{serviceSingle}}</p>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
        <script>
                var soClean = angular.module('soClean', []);
                    soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
                        $scope.locale = 'vancouver';
                        $scope.type = 'residential';
                        $scope.service = 'pressure washing';
                        $scope.serviceSingle = 'pressure wash';
                }]);
        </script>
    </body>
</html>

Upvotes: 6

Related Questions