<div class="row">
    <div class="col-md-8 pins-enabled">
        <h2>Pins Enabled</h2>
        <div class="row">
            <div ng-repeat="p in Pin.list" class="col-md-6 pin">
                <div class="panel panel-default ">
                    <div class="panel-heading">
                        <h3 class="panel-title">{{ p.num }}: {{ p.mode }}</h3>
                    </div>
                    <div class="panel-body">
                    </div>
                    <div class="btn-toolbar">
                        <a ng-if="p.value == 0" class="btn btn-block btn-success">Turn ON</a>
                        <a ng-if="p.value == 1" class="btn btn-block btn-danger">Turn OFF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 pin-events">
        <h2>Events Detected</h2>
        <div class="row">

        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8 pins-controls">
        <h2>Pins Enabled</h2>
        <div class="row">
            <div ng-repeat="p in Pin.list" class="col-md-6 pin">
                <div class="panel panel-default ">
                    <div class="panel-heading">
                        <h3 class="panel-title">{{ p.num }}: {{ p.mode }}</h3>
                    </div>
                    <div class="panel-body">
                    </div>
                    <div class="btn-toolbar">
                        <a ng-if="p.value == 0" ng-click="Pin.turnOn( p.num )" class="btn btn-block btn-success">Turn ON</a>
                        <a ng-if="p.value == 1" ng-click="Pin.turnOff( p.num )" class="btn btn-block btn-danger">Turn OFF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 pin-events">
        <h2>Events Detected</h2>
        <div class="row">
        </div>
    </div>
</div>

Add on and off functions
Add on and off functions
