Search code examples
javascriptangularjscontrollertitlehead

How can I use AngularJS controller-specific scope values in document head?

I am trying to use my scope values in my head title tag. This is external to the body element that has my controller. IS there a way to do this?

Here is my HTML:

<!DOCTYPE html>
<html ng-app="soCLean">
    <head>
        <title>{{locale}} {{type}} {{service}}</title>
    </head>
    <body ng-controller="soCleanLandingPage">
        <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>

Thanks for your help.

Solution

  • Just move your ng-controller to the html element.

    http://plnkr.co/edit/xImv48BvoW2Y9Ibb9JTq?p=preview (You can see the values in head in the debugger)

    <!DOCTYPE html>
<html ng-app="soClean" ng-controller="soCleanLandingPage">
    <head>
        <title>{{locale}} {{type}} {{service}}</title>
    </head>
    <body >
        <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>