Plus Minus One at a Time

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="plusMinusController as plusMinus">
  <div class="container" data-ng-class="{'has-selected': plusMinus.hasSelected()}">

    <div class="row" ng-repeat="block in plusMinus.blocks track by $index" data-ng-class="{ 'active': plusMinus.isActive($index)}">
      <div class="col-sm-4 col-xs-6">
        <div class="label-index" data-ng-class="{'active-selection': !plusMinus.isActive($index)}">
          {{$index}}
        </div>
        <a ng-href="#" class="btn btn-primary text-center" ng-click="plusMinus.selectBlock($index)">
          <i class="fa" data-ng-class="{'fa-minus': plusMinus.isActive($index), 'fa-plus': !plusMinus.isActive($index)}"></i>
        </a>
      </div>
      <div data-ng-show="plusMinus.isActive($index)" class="col-xs-3 textdiv">Hello</div>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

SCSS

body {
    padding-top: 15px;
}  
.has-selected :not(.active) > .col-sm-4 {
  
    width: 33%;
    height: inherit;
    background-color: rgba(00,00,00,0.8);
    z-index: 9;
}
.has-selected :not(.active) .col-sm-4 {
  @media (max-width:420px){
    width: 80%;
  }  

}

.label-index{
    width: 35%;
    height:50px;
    text-align:center;
    line-height:50px;
    float: left;
    left:15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 15px;
    color: orange;
    font-size: 18px;
    border:2px solid #000; 
    background-color: rgba(00,00,00,0.6);
}  
.textdiv{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    height:50px;
    text-align:center;
    line-height:50px;
    margin-top: 25px;
}
i {
    color:#000;
    font-size: 40px;
    line-height:50px;
} 
.btn {
    height: 50px;
    margin-top: 25px;
    margin-left: 15px;
}    
.active-selection {
    background-color:rgba(100,100,100,0.1);
    width: 35%;
    font-size: 40px;
    text-align: center;
    border:2px solid green; 
}

JavaScript

var app = angular.module('plusMinusApp', [])

.controller('plusMinusController', function() {

  var that = this;
	
  this.blocks = Array.apply(null, Array(10)).map(function (val, index) {return index;});

  this.activeIndex = null;

  this.isActive = function(index) {
    return that.activeIndex === index;
  };

  this.hasSelected = function() {
    return that.activeIndex !== null;
  };

  this.selectBlock = function(index) {
    
    if (that.activeIndex === index) {
    	that.activeIndex = null;
    }
    else {
    	that.activeIndex = index;
    }
    
  };



});

angular.element(document).ready(function() {
  angular.bootstrap(document, ['plusMinusApp']);
});