Rails и AngularJS как удалить элемент без обновления страницы

Question

Я создаю страницу с рельсами и angularjs и пытаюсь удалить элемент в таблице, это работает, если первое, что я делаю, это нажимаю кнопку после обновления страницы, но затем я не могу удалить еще один элемент. Я не знаю, вызвано ли это функцией загрузки jquery. Я оставляю код и ценю помощь. Спасибо.

app. js

var app = angular
  .module("FinanceTrackerApp", [])
  .factory("stockService", [
    "$http",
    function($http) {
      var stockApi = {};
      stockApi.searchStocks = function(symbol) {
        return $http.get("/search_stocks.json?stock=" + symbol);
      };

      stockApi.addStockToPortfolio = function(symbol) {
       return $http.post("/user_stocks.json?stock=" + symbol);
      };

      stockApi.deleteStockFromPortfolio = function(id_stock) {
       return $http.delete("/user_stocks/" + id_stock + ".json");
      };
      return stockApi;
    }
  ])
 .controller("stocksController", [
    "$scope",
    "stockService",
    function($scope, stockService) {
      $scope.stock = {};
      $scope.lookup = function() {
        if ($scope.ticker != undefined && $scope.ticker != "") {
          stockService.searchStocks($scope.ticker).then(
            function(response) {
              $scope.stock.error = null;
              $scope.stock.message = null;
              $scope.stock.symbol = response.data.ticker;
              $scope.stock.name = response.data.name;
              $scope.stock.last_price = response.data.last_price;
              $scope.stock.can_be_added = response.data.can_be_added;
            },
            function(response) {
              $scope.stock = {};
              $scope.stock.error = response.data.response;
            }
           );
        } else {
          $scope.stock = {};
        }
      };
      $scope.add = function() {
        if ($scope.stock != undefined && $scope.stock.symbol != "") {
          stockService.addStockToPortfolio($scope.stock.symbol).then(
            function(response) {
              $scope.stock.error = null;
              $scope.stock.message = response.data.response;
              $scope.stock.name = null;
              $scope.ticker = null;
              $("#stock-list").load("my_portfolio.js");
            },
            function(response) {
              $scope.stock = {};
              $scope.stock.error = response.data.error;
            }
          );
        } else {
          $scope.stock.error = "Stock cannot be added";
        }
       };
      $scope.delete = function(stock_id) {
        if (stock_id) {
          stockService.deleteStockFromPortfolio(stock_id).then(
            function(response) {
              $scope.stock.error = null;
              $scope.stock.message = response.data.response;
              $scope.stock.name = null;
              $scope.ticker = null;
              $("#stock-list").load("my_portfolio.js");
            },
            function(response) {
              $scope.stock = {};
              $scope.stock.error = response.data.error;
            }
          );
        } else {
         //handle later
         $scope.stock.error = "Stock cannot be deleted";
        }
     };
   }
]);

my_portfolio. html .erb

<div id="stock-lookup" ng-controller="stocksController">
  <form id="stock-lookup-form" ng-submit="lookup()">  
    <div class="form-group row no-padding text-center col-md-12">
      <div class="col-md-10">
        <input id="stock_ticker" type="get" class="form-control search-box input-lg" 
        placeholder="Stock Ticker Symbol" autofocus="true" ng-model="ticker" /> 
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-lg btn-success">  
          <i class="fa fa-search"></i> Look up a stock
        </button>
      </div>
    </div>
  </form>

  <div id="stock-lookup-status" class="results-block alert alert-success ng-hide" ng-show="stock.message">
    <!-- placeholder for messages -->
    <!--span class="badge badge-light">Placeholder</span-->
    {{ stock.message }}
  </div>

  <div id="stock-lookup-errors" class="results-block alert alert-danger ng-hide" ng-show="stock.error">
    <!-- placeholder for messages -->
    <!--span class="badge badge-light">Placeholder</span-->
    {{ stock.error }}
  </div>

  <div id="stock-lookup-results" class="well results-block ng-hide" ng-show="stock.name != undefined">
    <strong>Symbol: </strong> {{ stock.symbol }}
    <strong>Name: </strong> {{ stock.name }}
    <strong>Price: </strong> {{ stock.last_price }}

    <button class="btn btn-xs btn-success ng-hide" ng-click="add()" ng-show="stock.can_be_added">
      Add to my stocks
    </button>      
    <span class="label label-default"></span>
  </div>

  <div id="stock-list">
   <%= render "stocks/list"%>
  </div>
</div>

_list. html .erb

<table class="table table-striped">
  <thead>
   <tr>
     <th>Name</th>
     <th>Symbol</th>
     <th>Current Price</th>
      <% if @user.id == current_user.id %>
       <th>Actions</th>
      <% end %>
   </tr>
  </thead>
  <tbody>
    <% @user_stocks.each do |user_stock| %>
     <tr>
       <td><%= user_stock.name %></td>
       <td><%= user_stock.ticker %></td>
       <td><%= user_stock.last_price %></td>
       <% if @user.id == current_user.id %>
         <td>
           <input type="button" class="btn btn-xs btn-danger" ng-click="delete(<%= user_stock.id %>)" value="Delete this tracking">
         </td>
       <% end %>
     </tr>
    <% end %>
  </tbody>
</table>

В дополнение к проблеме, если я хочу добавить новую акцию, нет проблемы, она хорошо добавляется в таблицу. Но если я хочу удалить, я тоже не могу. Если я не обновлю sh страницу, и это не первое действие, которое вы предпримите.