Untitled

<!DOCTYPE html>
<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-app="thanksForYourHelp">
  <div ng-controller="BasicController">

    <select style="padding:3px 1px; width:100%;" data-ng-model="course" data-ng-options="course.Title for course in courses" data-ng-change="changeState(course)">
      <option value="">-- Select a Course --</option>
    </select>
        <h4>Please View in embed mode & preview in new window to make sure you can see URLs in url bar :) the above preview does not show them</h4>
    <p ng-if="course.Title">URL looks like: .../#/search/classInfo/{{course.Title}}</p>
  </div>
</body>

</html>

angular.module("thanksForYourHelp", ["ui.router"])
  .config(function($stateProvider, $locationProvider) {

    // used to clear before #
    $locationProvider.hashPrefix('');

    $stateProvider
      .state('search', {
        url: '/search/:classInfo/:classTitle/',
        controller: 'BasicController',
        params: {
          classInfo: {
            squash: true,
            value: null
          },
          classTitle: {
            squash: true,
            value: null
          },
        },

      });
  });

function BasicController($scope, $state) {

  $scope.changeState = function(course) {
    //console.log(course.Title);
    $state.go('search', {
      classInfo: 'classInfo',
      classTitle: course.Title
    });
  }

  $scope.courses = [{
    Title: 'maths'
  }, {
    Title: 'science'
  }];

}