Bootstrap 3 + AngularJS

by Bruno Sabetta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="mymodal" ng-controller="MainCtrl" class="container">
  <div id="showNote">
    <div ng-if="!tableSpeVis">
      <h2>Info Section</h2>
      <button class="btn btn-success" ng-click="showTable(true)">
        Show Table Again
      </button>
    </div>
    <div ng-if="tableSpeVis">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>Специальность</th>
            <th>Код</th>
            <th>Уровень подготовки</th>
            <th>УГСН</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in items">
            <td>{{item.spename}}</td>
            <td>{{item.specode}}</td>
            <td>{{item.edulevel}}</td>
            <td>{{item.ugsn}}</td>
            <td>
              <!-- This button work :) -->
              <a class="btn btn-primary" role="button" ng-click="showTable(false)">Info</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

JavaScript

angular.module('mymodal', [])
  .controller('MainCtrl', function($scope) {
    $scope.tableSpeVis = true;
    $scope.showTable = function(bool){
    	$scope.tableSpeVis = bool;
    }
    $scope.items = [{
      "spename": "Ronald Freeman",
      "specode": "99-024",
      "edulevel": 5,
      "ugsn": 71
    }, {
      "spename": "Ruth Powell",
      "specode": "68-2741",
      "edulevel": 9,
      "ugsn": 13
    }, {
      "spename": "Kevin Fisher",
      "specode": "51-3094",
      "edulevel": 7,
      "ugsn": 68
    }, {
      "spename": "Arthur Hunter",
      "specode": "56-814",
      "edulevel": 8,
      "ugsn": 67
    }, {
      "spename": "Ann Long",
      "specode": "95-272",
      "edulevel": 6,
      "ugsn": 75
    }];
  });