Why is my AngularJS $scope not working?

Question

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.

Don't wrap your Angular code in a jQuery DOM ready function! The script is already at the bottom of the page. — tymeJV
– tymeJV, Commented Feb 18, 2014 at 20:43
Ok, I will remove that now. Thanks. However, it did not fix the issue. — AHCo
– AHCo, Commented Feb 18, 2014 at 20:45
not sure ,but it could be that your <script> tag is inside your ng-controller. I would try moving the script to below the </body> tag — GSto
– GSto, Commented Feb 18, 2014 at 20:52

Craig Squire · Accepted Answer · 2014-02-18 20:57:46Z

6

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>

answered Feb 18, 2014 at 20:57

Craig Squire

2,14114 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AHCo Over a year ago

Thanks Craig, I didn't even see that.

AHCo Over a year ago

When is a code editor coming with spelling and grammar checks? :D

AHCo Over a year ago

Thanks Craig, just got back to my computer and made that change, and all is well! Kudos

Collectives™ on Stack Overflow

Why is my AngularJS $scope not working?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related