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

Question 1

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>

Question 2

You can use the $rootScope:

app.run(function($rootScope){
  $rootScope.locale = "en";
  $rootScope.type = "something";
  $rootScope.service = "another";
});

You can also use a fancy directive:

app.directive('title', function(){
  return {
    restrict: 'E',
    scope:{},
    template: "{{locale}} {{type}} {{service}}",
    link: function(scope){
      scope.locale = "en";
      scope.type = "something";
      scope.service = "another";
    }
  }
});

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

Check this plunker: http://plnkr.co/edit/JRblEkKaOCLNC2O7r9s4?p=preview