Ui-router dynamic links

http://angularjs.org/

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script type="text/ng-template" id="/state1/val1.html">
    <div>My State 1</div>
</script>

<nav> 
    <a ui-sref="state1({'param': 'val1'} )">State 1</a>
    <a ui-sref="state2">State 2</a>
</nav>

<div ui-view></div>

CSS

nav{
    margin-bottom: 1em;
}

JavaScript

var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "state1/:param",
        templateUrl: function ($stateParams){
            return ("/state1/" + $stateParams.param + ".html");
        },
        controller: "Ctrl1",
        onEnter: function($stateParams){
            console.log("On Enter");
        },
        onExit: function($stateParams){
            console.log("On Exit");
        } 
      }).state("state2", {
        url: "state2",
        template: "<p>State 2</p>",
        controller: "Ctrl2"
      });
});

var ctrls = angular.module("AppCtrls", []);

ctrls.controller( "Ctrl1", function($scope) {
    console.log("Ctrl1 loaded.");
});

ctrls.controller( "Ctrl2", function($scope) {
    console.log("Ctrl2 loaded.");
});