Untitled

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
    
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
    
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
  
<div ng-controller="MenuCtrl">
    <ul>
        <li><a href="#/page/running">Running</a></li>
        <li><a href="#/page/walking">Walking</a></li>
    </ul>

</div>


<script type="text/ng-template" id="modalContainer">
    <div ng-controller="ModalContainerCtrl"></div>
</script>

  <div ng-view></div>
    
</body>
<script src="script.js"></script>
</html>

'use strict';

angular.module('myApp', [
  
  'ngRoute',
  'ui.bootstrap'
])
.config(function($routeProvider) {
    $routeProvider
        .when('/page/:name', {
            templateUrl : 'modalContainer',
            controller : 'ModalContainerCtrl'
        })
        .when('/menu', {
            controller : 'MenuCtrl'
        })
        .otherwise({redirectTo: '/menu'});
})
.controller('MenuCtrl', ['$scope', function($scope) {


}])
.controller('ModalContainerCtrl',['$scope', '$modal', '$route', function($scope, $modal, $route) {

        console.log("hello I am the ModalContainerCtrl")

        var modalInstance = $modal.open({
            templateUrl : 'modal.html',
            controller: 'ModalCtrl'
        });

        $scope.activity = $route.current.pathParams.name;
        console.log($scope.activity)


}])
.controller('ModalCtrl', ['$scope', function($scope, $modalInstance) {
    console.log("Hello I am the modal control")
            //Modal controls
        $scope.close = function () {
            console.log("close!")
            modalInstance.close();
        };

}]);

<div class="modal-header">
  <h1>This is the title</h1>
</div>
<div class="modal-body">
 <p> Hi, I'm a modal about {{ activity }}</p>

<p>    <button class="btn btn-primary" ng-click="close()">Close</button></p>

</div>