AngularJS Dynamic States & Routing

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myCtrl">

  <h1>Mobile Nav Stack Routing!</h1>
  <div class="links">
    <span class="title">Route Links</span>
      <div ng-repeat="view in views">
        <a ui-sref="view_route({index: $index})">{{view}}</a>
      </div>
  </div>
  <div class="radio">
    <span class="title">Radio Change State</span>
    <br/>
      <div ng-repeat="view in views">
        <input type="radio" value="{{$index}}" ng-model="Model.selected" ng-change="go(Model.selected)" id="something{{$index}}" />
        <label for="something{{$index}}">{{view}}</label>
      </div>
  </div>
<div class="output">
  <h3>Dynamic Template Output: UI View</h3>
<hr/>
<br />
  <div ui-view=""></div>
</div>
</body>

</html>

var app = angular.module('app', ['ui.router']);

app.controller('myCtrl', function($scope, $state) {
  $scope.val = "This is my Message...";
  $scope.views = ['Cart', 'Product', 'Search'];
  $scope.Model = {
    selected: null
  };
  $scope.go = function(index) {
    $state.go('view_route', {
      index: index
    });
  };
});

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('view/route1', {
      url: "/route1",
      templateUrl: "file1.html"
    })

  .state('view_route', {
    url: "/route/{index:int}",
    templateProvider: function($templateRequest, $stateParams) {

      var index = $stateParams.index + 1;
      var templateName = 'file' + index + '.html';

      return $templateRequest(templateName);
    },
  });

});

/* Styles go here */
body{
   font-family: Helvetica, Arial, sans-serif;
}
.links {
  clear:both;
  float:left;
  padding: 10px;
  border-color: red;
  border-width: thin;
  border-style: groove;
  width: 225px;
  height: 80px;
}

.links a{
  padding-left: 10px;
  color: darkred;
  font-weight: bolder;
}

.radio {
  float: left;
  padding: 10px;
  border-color: red;
  border-width: thin;
  border-style: groove;
  margin-left: 30px;
  width: 225px;
  height: 80px;
}
.radio input{
  color: blue;
}

.output{
  clear: both; 
  float:left;
  margin-top: 20px;
  /*border-color: green;
  border-width: thick;
  border-style: solid; */
}

.title
{
 font-weight: bolder;
}

This is <b>File 1</b> text showing dynamic templating used <br/> 
<hr>
<span style="color:green"><b>file1.html</b></span>.

This is <b>File 2</b> text showing dynamic templating used <br/> 
<hr>
<span style="color:blue"><b>file2.html</b></span>.

This is <b>File 3</b> text showing dynamic templating used <br/> 
<hr>
<span style="color:red"><b>file3.html</b></span>.