AngularJS：更改视图后保持输入状态被检查

Question

我正在工作的网站以以下两种方式之一显示新闻：列表或网格视图。

默认模式是列表。用户可以通过顶部的选项更改模式：

选项在div和标签中：

<div class="btn-group" data-toggle="buttons" id="view-card-mode" data-intro="{{uikey.chTipoVista}}" data-position="bottom">
  <label class="btn btn-default grid-view" title="{{uikey.VistaGrilla}}">
    <input type="radio" name="options" id="grid-view" autocomplete="off" checked>
    <i class="fa fa-th"></i>
  </label>
  <label class="btn btn-default list-view active" title="{{uikey.VistaLista}}">
    <input type="radio" name="options" id="list-view" autocomplete="off">
    <i class="fa fa-list"></i>
  </label>
</div>

但是在此页面的控制器中，没有对这些控件的引用。 通过jquery对视图进行更改：

// List/Grid View
$('#view-card-mode .list-view').off('click');
$('#view-card-mode .list-view').on('click', function() {
  $('.card-container').addClass('card-list');
  $('.card-container').removeClass('card-grid');
  $('.actions-list').show();
  $('.actions-grid').hide();
});

$('#view-card-mode .grid-view').off('click');
$('#view-card-mode .grid-view').on('click', function() {
  $('.card-container').removeClass('card-list');
  $('.card-container').addClass('card-grid');
  $('.actions-list').hide();
  $('.actions-grid').show();
});

因此，当我单击“网格视图图标”时，该函数在以下div上添加一个类“ grid”（默认为列表视图）：

<div class="card-container card-list" id="menucontext">

问题是，如果我选择“网格视图”，则当我更改页面状态（例如，我访问新闻然后返回）时，选择消失了，总是返回列表视图（默认）

有什么办法可以让我通过angularjs或jquery选择视图？我对angularjs的经验很少，但我仍在努力理解数据绑定背后的逻辑。

我搜索了其他类似的问题，但没有任何效果。我什至尝试将jquery函数转换为angular函数，但是我不确定如何将其绑定到html中：

控制器首先尝试：

$scope.view = 'card-container card-list';
$scope.viewTypeSelected = "list";

$scope.changeView = function() {
  if ($scope.viewTypeSelected === "list") {
    $scope.view = 'card-container card-grid';
  } else {
    $scope.view = 'card-container card-list';
  }
}

控制器第二次尝试：

$scope.viewTypesCtrl = function() {
  var self = this;
  self.views = ["card-grid", "card-list"];
  self.changeView = changeView;

  function changeView(view) {
    self.viewSelected = view;
  }
}

我需要澄清一下该站点可以正常工作，没有问题。我只需要添加此功能。

谢谢。