$location values display

Shows the values of angular $location

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<!-- Ugly Hack to make AngularJS routing work inside of jsFiddle -->
<base href="/" />
<ul class="nav nav-pills" ng-controller="navController as navCtrl">
    <li><a href ng-click="navCtrl.goTo('/PlainRoute')">Plain Route</a>

    </li>
    <li><a href ng-click="navCtrl.goTo('/withQuery?foo=bar&jane=silly')">With Query</a>

    </li>
</ul>
<div class="container">
    <div data-ng-view></div>
</div>
<script type="text/ng-template" id="/showRouteInfo.html">
    <div class="alert alert-default">
        <input type="text" ng-model="url" />
        <button type="button" ng-click="changeLocation(url)">Go!</button>
            <div ng-repeat="methodOuput in methodOutputs">
                <span class="key">{{methodOuput.name}}:</span>
                <span class="val">{{methodOuput.val}}</span>
            </div>
    </div>
</script>

CSS

.key, .val {
    font-size: 1.5em;
    line-height: 2em;
}

.key{
    display:inline-block;
    width:100px;
    font-weight:bold;
}

.val{
    color:blue;
}

JavaScript

(function () {
    angular.element(document).ready(function () {
        var module = angular.module('demo', ['ngRoute']);

        module.controller('navController', ['$location', function ($location) {

            this.goTo = function (viewPath) {
                $location.url(viewPath);
            };
        }]);

        module.controller('routeInfoCtrl', function ($scope, $location) {
            $scope.url = $location.url();
            var methods = ['absUrl', 'url', 'protocol', 'host', 'port', 'path', 'search', 'hash'];

            $scope.changeLocation = function(url){
                $location.url(url);
            };
            
            $scope.$watch('url', function () {
                
                $scope.methodOutputs = [];

                angular.forEach(methods, function(methodName){
                    $scope.methodOutputs.push({
                        name: methodName,
                        val: $location[methodName]()
                    });
                });
            });
        });

        module.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            $routeProvider.otherwise({
                controller: 'routeInfoCtrl',
                templateUrl: '/showRouteInfo.html'
            });

            $locationProvider.html5Mode(true);
        }]);

        angular.bootstrap(document, ['demo']);
    });


}());