AngularJS $window.open example

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="container" ng-app="sortApp" ng-controller="mainController">
  
  <table class="table table-bordered ">  
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Sushi Roll 
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          Fish Type 
          </a>
        </td>
      </tr>
    </thead>
    
    <tbody>
      <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish track by $index" ng-mouseover="rowselected($index)" 
      ng-class="{selected : $index == rowNumber}"
      
      >
        <td>{{ roll.name }} {{$index}}</td>
        <td>{{ roll.fish }}{{rowNumer}}</td>
      </tr>
    </tbody>
  
  </table>
   
</div>

CSS

body { padding-top:50px; }

.selected {border: 2px solid red !important}

JavaScript

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term
  
  $scope.rowNumber = -1;
  
  // create the list of sushi rolls 
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' }
  ];
  
  $scope.rowselected = function(row)
  {
  console.log(row);
    $scope.rowNumber = row;
  }
  
  
});