$watch in controller

by Marko Keuschnig

HTML

<div ng-app="">
    <div ng-controller="LinkBuilderCtrl">Dimension
        <select ng-model="dimension" ng-options="dim.name for dim in dimensions"></select>
        <br/>
        <br/>url: {{completeUrl}}
        <br/>
        <br/>dimension: {{url.dimension}}
    </div>
</div>

JavaScript

function LinkBuilderCtrl($scope) {
    $scope.dimensions = [{
        name: "Tag",
        value: 1
    }, {
        name: "Woche",
        value: 2
    }, {
        name: "Monat",
        value: 3
    }, {
        name: "Quartal",
        value: 4
    }, {
        name: "Jahr",
        value: 5
    }];
    $scope.dimension = $scope.dimensions[0];

    $scope.url = {
        base: "http://localhost:62294/GetData?",
        from: "2014-03-01 00:00:00",
        to: "2014-03-15 00:00:00",
        dimension: $scope.dimension.value
    };

    $scope.buildUrl = function () {
        $scope.completeUrl = $scope.url.base + "dateFrom=" + $scope.url.from + "&dateTo=" + $scope.url.to + "&dimension=" + $scope.url.dimension;
    };

    $scope.$watch('url', function () {
        $scope.buildUrl();
    }, true);
}