Music Artist

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

<head>

  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
  <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://bootswatch.com/slate/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h1><span class="glyphicon glyphicon-headphones"></span> Music Artist</h1>
      </div>
      <div class="row">
        <div class="col-xs-12">
         <div data-ng-view></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

var app = angular.module('musicApp', ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider.when("/items", {
      templateUrl: "view-list.html",
      controller: "listController"
    })
    .when("/items/add", {
      templateUrl: "view-detail.html",
      controller: "addController"
    })
    .when("/items/:index", {
      templateUrl: "view-detail.html",
      controller: "editController"
    })
    .otherwise({
      redirectTo: "/items"
    });
});

app.factory('musicService', ['$rootScope', function($rootScope) {
  var svc = {};

  var data = [{
    name: "Group Love",
    genre: "Alternative",
    rating: "4"
  }, {
    name: "The Beatles",
    genre: "Rock",
    rating: "5"
  }, {
    name: "The Cure",
    genre: "New Wave",
    rating: "4"
  }, {
    name: "One Direction",
    genre: "Modern",
    rating: "4"
  }];

  svc.getArtists = function() {
    return data;
  };

  svc.addArtist = function(artist) {
    data.push(artist);
  };

  svc.editArtist = function(index, artist) {
    data[index] = artist;
  };

  return svc;
}]);

app.controller('listController', ['$scope', '$location', '$routeParams', 'musicService', function($scope, $location, $routeParams, musicService) {

  $scope.data = musicService.getArtists();

  $scope.addArtist = function() {
    $location.path("/items/add");
  };
  $scope.editItem = function(rofa) {
    $location.path("/items/" + rofa);
  };

}]);
app.controller('addController', ['$scope', '$location', '$routeParams', 'musicService', function($scope, $location, $routeParams, musicService) {
  $scope.save = function() {
    musicService.addArtist({name: $scope.Item.name, genre: $scope.Item.genre, rating: $scope.Item.rating});
    $location.path("/items");

  };
  $scope.cancel = function() {
    $location.path("/items");

  };
}]);
app.controller('editController', ['$scope', '$location', '$routeParams', 'musicService', function($scope, $location, $routeParams, musicService) {

  $scope.Item = musicService.getArtists()[parseInt($routeParams.index)];
   
  $scope.item = function() {

  };
  $scope.save = function() {
    musicService.editArtist(parseInt($routeParams.index), {name: $scope.Item.name, genre: $scope.Item.genre, rating: $scope.Item.rating});

    $location.path("/items");

  };
  $scope.cancel = function() {
    $location.path("/items");

  };

}]);

/* Styles go here */

<div class="form-group">
  <input type="text" class="form-control" id="search" placeholder="Search Artist" data-ng-model="search" />
</div>
<table class="table table-striped table-hover">
  <tr>
    <th>Artist Name</th>
    <th>Genrec</th>
    <th>Rating</th>
  </tr>
  <tr data-ng-repeat="item in data | filter:search" data-ng-click="editItem($index)">
    <td>{{item.name}}</td>
    <td>{{item.genre}}</td>
    <td>{{item.rating}}</td>
  </tr>
</table>
<div class="form-group">
  <button data-ng-click="addArtist()" class="btn btn-primary">Add Artist</button>
</div>

<div class="form-group">
  <label for="textName">Artist Name:</label>
  <input type="text" id="textName" class="form-control" data-ng-model="Item.name" />
</div>
<div class="form-group">
  <label for="compgenre">Artist genre:</label>
  <select name="compgenre" id="compbgenre" class="form-control" data-ng-model="Item.genre">
    <option></option>
    <option value="Rock">Rock</option>
    <option value="Alternative">Alternative</option>
    <option value="Rap">Rap</option>
    <option value="Modern">Modern</option>
    <option value="New Wave">New Wave</option>
  </select>
</div>
<div>
  <label for="compRating">Artist Rating:</label>
  <select name="compRating" id="compRating" class="form-control" data-ng-model="Item.rating">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
<div>
  <button class="btn btn-primary" data-ng-click="save()">Save</button>
  <button class="btn btn-primary" data-ng-click="cancel()">Cancel</button>
</div>