Custom Directive

http://angularjs.org/

by Edward Tanguay

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div ng-controller="mainController">
    
    <div>id = {{id}}</div>
    <div>uid = {{uid}}</div>
    <div>score = {{score}}</div>

    <button ng-click="changeNumber()">change</button>
    
</div>

CSS

body {
    padding: 20px;
}

JavaScript

// this example works locally but not at jsfiddle
angular.module('myApp', [])
.controller('mainController', function ($scope, $log, $location) {
    urlVariables = $location.search();
    $scope.id = urlVariables.id === undefined ? 0 : urlVariables.id;
    $scope.uid = urlVariables.uid === undefined ? 0 : urlVariables.uid;
    $scope.score = urlVariables.score === undefined ? 0 : urlVariables.score;

    $scope.changeNumber = function() {
        $scope.urlManagerChangeVariable('id', Math.floor(Math.random() * 60) + 20);
        $scope.urlManagerChangeVariable('uid', Math.floor(Math.random() * 60) + 20);
        $scope.urlManagerChangeVariable('score', Math.floor(Math.random() * 60) + 20);
    };

    $scope.urlManagerChangeVariable = function(name, value) {
        urlVariables = $location.search();
        urlVariables[name] = value;
        $location.search(urlVariables);
        $log.info(urlVariables);
        $scope.id = urlVariables.id;
        $scope.uid = urlVariables.uid;
        $scope.score = urlVariables.score;
    }
});