Modal dialog angularjs

<!doctype html>
<html ng-app="mainApp">

<head>
  <style>
    th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
    }
    
    td,
    th {
      border: 1px solid #ddd;
      padding: 8px;
    }
    
    body {
      background-color: lightblue;
    }
    
    active {
      background-color: orange;
    }
  </style>
  <script src="https://code.angularjs.org/1.2.18/angular.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>
  <div class="container" ng-controller="TableFilterController">
    <table class="table table-hover">
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Role</th>
      </tr>
      <tr ng-repeat="p in details " ng-class="{active : isSelected(p)}">
        <td>{{ $index + 1 }}</td>
        <td><a ng-click="clickMe(p)">{{p.name}}</a></td>
        <td>{{p.age}}</td>
        <td>{{p.mass}}</td>
      </tr>
    </table>
    <hr>
  </div>
</body>

</html>

var mainApp = angular.module("mainApp", ['ui.bootstrap']);

mainApp.controller('TableFilterController', function($scope, $modal, $log) {
  $scope.clickMe = function(p) {
    $scope.selected = p;
  }
 $scope.clickMe = function(p) {

    $modal.open({
      templateUrl: 'myModalContent.html',
      backdrop: true,
      windowClass: 'modal',
      controller: function($scope, $modalInstance, $log) {
        $scope.selected = p;
        $scope.submit = function() {
          $log.log('Submiting user info.');
          $log.log($scope.selected);
          $modalInstance.dismiss('cancel');
        }
        $scope.cancel = function() {
          $modalInstance.dismiss('cancel');
        };
      },
      resolve: {
        user: function() {
          return $scope.selected;
        }
      }
    });
  };
  $scope.isSelected = function(p) {
    return $scope.selected === p;
  }
  $scope.details = [{
      name: 'Mercury',
      age: 0.4,
      mass: 0.055,
      descp: 'it is the hottest planet',
    }, {
      name: 'Venus',
      age: 0.7,
      mass: 0.815
    }, {
      name: 'Earth',
      age: 1,
      mass: 1
    }, {
      name: 'Mars',
      age: 1.5,
      mass: 0.107
    }, {
      name: 'Ceres',
      age: 2.77,
      mass: 0.00015
    }, {
      name: 'Jupiter',
      age: 5.2,
      mass: 318
    }, {
      name: 'Saturn',
      age: 9.5,
      mass: 95
    }, {
      name: 'Uranus',
      age: 19.6,
      mass: 14
    }, {
      name: 'Neptune',
      age: 30,
      mass: 17
    }, {
      name: 'Pluto',
      age: 39,
      mass: 0.00218
    }, {
      name: 'Charon',
      age: 39,
      mass: 0.000254
    }



  ];

});

<div class="modal-header">
  <h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
<div class="modal-body">
  <div class="panel panel-default">
      <div class="panel-body">
            {{selected | json}}
      </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-success" ng-click="ok()">Save</button>
  <button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>