_price-plan.scss

//Grid System Setup
.price-row{
  @for $i from 1 through 12 {
    .col-#{$i} {
      width: 100% / 12 * $i;
      float: left;
      box-sizing: border-box;
    }
  }
  margin:0 auto;
  width: 1024px;
  clear: both;
  margin-top:40px;
}

.price-column{
 //background-color:#e6e6e6;
}

.price-column-container{
  background-color:#ffffff;
  margin:10px;
  border:1px solid #ccc;
  min-height:600px;
}

.price-column-title-box{
  text-transform:uppercase;
  text-align:center;
  font-size:24px;
  padding:10px;
  border-bottom:1px solid #ccc;
}

.price-column-dollar-sign{
 font-size:24px;
 vertical-align:super;
 font-weight:600
}
.price-column-price-text{
  font-size:72px;
  font-weight:300;
  margin: 0 auto;
  text-align:center;
  line-height:80px;
}

.price-column-sub-text{
  font-size:14px;
  text-transform:uppercase;
  line-height:0;
  text-align:center;
}

.price-column-feature-list{
  list-style:none;
  margin-left:0;
  padding:0 20px;
}

.price-column-feature-list > li{
  margin: 20px 0;
}

.price-column-button{
  text-align:center;
  margin:30px 0;
}

.btnBase{
  border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4285;
    margin: 0 2px;
    padding: 6px 12px;
    text-decoration: none;
    text-transform: uppercase;
}

.priceButton{
  background-color:#f78c26;
  color:#fff;
}

directive.html

{{name}} {{vm.name}} {{plan.plans[0].name}}
<div ng-repeat="price in plan.plans">
<ul>
<li>{{price.name}}</li>
</ul>
</div>
{{plan.plans}}
<div class="price-table">
  <div class="price-column" ng-class="planCol()" ng-repeat="pricePlan in plan.plans">
    <div class="price-container" ng-class="pricePlan.popular ? 'popular-plan' : 'popular-disabled'">
      <div class="priceColumnBanner">
        <span>Most Poular</span>
      </div>
      <div class="priceColumnFeatureInfo">
        <div class="price-title-box">
          {{pricePlan.name}}
        </div>
        <div class="priceAmount">
          <p class="price-plan-text"><span class="price-plan-dollar-sign">$</span>{{pricePlan.price}}<span class="price-plan-sub-text">month</span></p>
          <p class="price-plan-sub-text">PER USER</p>
        </div>
        <div class="price-table-button">
          <p class="price-table-current-plan" ng-if="pricePlan.active">Your Current Plan</p>
          <button class="btnBase priceButton" ng-if="!pricePlan.active">
            Select Plan
          </button><br>
          <span class="price-column-trial-text" ng-if="pricePlan.trial">Your trial ends in {{pricePlan.trial_days}} days</span>
        </div>
      </div>
      <ul class="price-column-feature-list">
        <li ng-repeat="feature in pricePlan.features">{{feature}}</li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
  <div class="clear"></div>
</div>

<!-- <div class="price-table">
  <div class="price-row" ng-repeat="pricePlan in plan.plans">
    <div class="price-container">
      <div class="priceColumnFeatureInfo">
        <div class="price-title-box">
          {{pricePlan.name}}
        </div>
        <div class="priceAmount">
          <p class="price-plan-text"><span class="price-plan-dollar-sign">$</span>{{pricePlan.price}}<span class="price-plan-sub-text">month</span></p>
          <p class="price-plan-sub-text">PER USER</p>
        </div>
        <div class="price-column-button">
          <p class="price-column-current-plan" ng-if="pricePlan.active">Your Current Plan</p>
          <button class="btnBase priceButton" ng-if="!pricePlan.active">
            Select Plan
          </button><br>
           <span class="price-column-trial-text" ng-if="pricePlan.trial">Your trial ends in {{pricePlan.trial_days}} days</span>
        </div>
      </div>
      <ul class="price-column-feature-list">
        <li ng-repeat="feature in pricePlan.features">{{feature}}</li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
</div> -->

<!-- <div class="price-table">
  <div class="price-column price-row" ng-repeat="pricePlan in plan.plans">
    <div class="price-row-container">
      <div class="priceColumnFeatureInfo">
        <div class="price-row-title-box">
          {{pricePlan.name}}
        </div>
        <div class="price-column-price">
          <p class="price-column-price-text"><span class="price-column-dollar-sign">$</span>{{pricePlan.price}}<span class="price-column-sub-text">month</span></p>
          <p class="price-column-sub-text">PER USER</p>
        </div>
      </div>
      <ul class="price-column-feature-list">
        <li ng-repeat="feature in pricePlan.features">{{feature}}</li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
</div>
 -->

<hr>
<div style="display:block;">
  <h1> Modal</h1>
</div>

<div class="priceTableModal">
  <span class="priceTableModal-close">&#x2715;</span>
  <div class="price-column price-row">
   <span class="price-plan-confirm-text">Please Confirm your selection</span>
    <div class="price-container">
      <div class="priceColumnFeatureInfo">
        <div class="price-title-box">
          {{plan.plans[0].name}}
        </div>
        <div class="priceAmount">
          <p class="price-plan-text"><span class="price-plan-dollar-sign">$</span>{{plan.plans[0].price}}<span class="price-plan-sub-text">month</span></p>
          <p class="price-plan-sub-text">PER USER</p>
        </div>
      </div>
      <ul class="price-column-feature-list">
        <li ng-repeat="feature in plan.plans[0].features">{{feature}}</li>
      </ul>
      <div class="clear"></div>
    </div>
    <div class="modalCta">
      <p class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio sunt, error eius temporibus, voluptate illo consectetur dicta mollitia perferendis dolores repellendus numquam? Rem dolor autem earum vitae numquam natus similique.</p>
      <button class="btnBase priceButton" ng-if="!pricePlan.active">Upgrade Plan</button>
    </div>
  </div>
</div>

directive.js

var globes;
(function () {
    "use strict";

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

    app.factory('getPricing', function getPricing($http, $q){
        var service = {
            plans: [],
            getPlans: getPlans
        };
        return service;

        function getPlans(){
            var def = $q.defer();
            $http.get('price-plan.json')
                .success(function(data){
                    service.plans = data;
                    def.resolve(data);
                })
                .error(function(){
                    def.reject('Failed to get Pricing');
                });
            return def.promise;
        }
    });

    app.controller('prices', function($scope, getPricing){
        var vm = this;
        vm.plans = [];

        vm.getPlans = function() {
            getPricing.getPlans()
                .then(function(plans) {
                    vm.plans = plans;
                    globes = plans;
                },
                function(data) {
                    console.log('pricing retrieval failed.')
                });
        };
        
        vm.getPlans();
        console.log(vm.plans);
        $scope.plans = vm.plans;
        $scope.planCol = function(){
            var num = vm.plans.length;
            if(num > 4){
                return 'price-row';
            } else {
                var cols = 12/num;
                return 'col-' + cols;
            }
        }
    });

    app.directive('priceplan', function ($q, $http) {

        return {
            restrict: 'EA',
            scope: {},
            controller: "prices as plan",
            templateUrl: 'pricePlan.directive.html'
        };
    });
})();

index.html

<!DOCTYPE html>
<html ng-app="networkDirectives">
<head>
	<meta charset="UTF-8">
	<title>price is right</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
	<script src="pricePlan.directive.js"></script>
	<link rel="stylesheet" href="price-plan.css">
</head>
<body>
H1llo world
	<priceplan></priceplan>
</body>
</html>

price-plan.css

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);
* {
  font-family: Lato, Helvetica;
}

.price-table {
  margin: 0 auto;
  width: 1024px;
  clear: both;
  margin-top: 40px;
}
.price-table .col-1 {
  width: 8.33333%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-2 {
  width: 16.66667%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-3 {
  width: 25%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-4 {
  width: 33.33333%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-5 {
  width: 41.66667%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-6 {
  width: 50%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-7 {
  width: 58.33333%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-8 {
  width: 66.66667%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-9 {
  width: 75%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-10 {
  width: 83.33333%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-11 {
  width: 91.66667%;
  float: left;
  box-sizing: border-box;
}
.price-table .col-12 {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

.price-container {
  background-color: #ffffff;
  margin: 10px;
  border: 1px solid #ccc;
  min-height: 600px;
}

.price-title-box {
  text-transform: uppercase;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.price-plan-dollar-sign {
  font-size: 24px;
  vertical-align: super;
  font-weight: 600;
}

.price-plan-text {
  font-size: 72px;
  font-weight: 300;
  margin: 0 auto;
  text-align: center;
  line-height: 80px;
}

.price-plan-sub-text {
  font-size: 16px;
  text-transform: uppercase;
  line-height: 0;
  text-align: center;
}

.price-column-text {
  font-size: 14px;
  text-transform: uppercase;
  line-height: 0;
  text-align: center;
}

.price-column-feature-list {
  list-style: none;
  float:left;
  margin-left: 0;
  padding: 0 20px;
}

.price-column-feature-list > li {
  margin: 20px 0;
}

.price-table-button {
  text-align: center;
  margin: 30px 0;
  height: 40px;
}

.btnBase {
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4285;
  margin: 0 2px;
  padding: 6px 12px;
  text-decoration: none;
  text-transform: uppercase;
}

.priceButton {
  background-color: #f78c26;
  color: #fff;
}

.priceColumnBanner{
  text-align:center;
  display:block;
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
}

.popular-plan{
  margin-top: -20px;
  padding-bottom: 30px;
}

.popular-disabled > .priceColumnBanner{
  display:none;
}

.price-table-current-plan{
  padding: 5px 0;
}

.price-column-trial-text{
  color:#777777;
  font-size: 12px;
  text-transform: uppercase;
}


/*PRICE ROWS*/

.price-row .priceColumnFeatureInfo{
    width: 20%;
    min-width:200px;
    float: left;
    margin-right: 20px;
    border-right: 1px solid #ccc;
    padding-bottom:20px;
}

.price-row .price-container {
  background-color: #ffffff;
  margin: 10px;
  border: 1px solid #ccc;
  min-height: initial;
}

.price-row .popular-plan{
  padding-bottom:0;
}

.price-row .price-title-box{
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  border:none;
}

/*  font-size: 24px;
  padding: 10px;
  border-bottom: 1px solid #ccc;*/

.priceColumnFeatureInfo::after{
   clear:both;
}


.clear{
  clear:both !important;
}


/*Price Table Modal*/
.priceTableModal{
  width:50%;
  min-width:500px;
  margin:0 auto;
  border:1px solid #cccccc;
  box-sizing: border-box;
  padding: 30px;
}

.priceTableModal .price-container{
  margin: 10px 0;
}

.price-plan-confirm-text{
  font-size: 24px;
}

.priceTableModal-close{
  float:right;
  font-size:24px;
}

.modalCta{
    text-align: center;
    margin-bottom: 20px;
}

price-plan.json

[
    {
        "name": "Plan A",
        "price": 35,
        "popular": 1,
        "features": [
            "Accounts Recievable or Payable",
            "Send ACH Payments or Recieve them",
            "Sync with Quickbooks"
        ],
        "trial": 0,
        "trial_days": 24,
        "active":0,
        "trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
    },
    {
        "name": "Plan B",
        "price": 49,
        "popular": 0,
        "features": [
            "Accounts Recievable or Payable",
            "Send ACH Payments or Recieve them",
            "Sync with Quickbooks"
        ],
        "trial": 1,
        "trial_days": 32,
        "active":0,
        "trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
    },
    {
        "name": "Plan C",
        "price": 79,
        "popular": 0,
        "features": [
            "Accounts Recievable or Payable",
            "Send ACH Payments or Recieve them",
            "Sync with Quickbooks"
        ],
        "trial": 0,
        "trial_days": 0,
        "active":1,
        "trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
    },
    {
        "name": "Plan C",
        "price": 79,
        "popular": 0,
        "features": [
            "Accounts Recievable or Payable",
            "Send ACH Payments or Recieve them",
            "Sync with Quickbooks"
        ],
        "trial": 0,
        "trial_days": 0,
        "active":1,
        "trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
    },
    {
        "name": "Plan C",
        "price": 79,
        "popular": 0,
        "features": [
            "Accounts Recievable or Payable",
            "Send ACH Payments or Recieve them",
            "Sync with Quickbooks"
        ],
        "trial": 0,
        "trial_days": 0,
        "active":1,
        "trial_message": "Your trial has expired. Click <a href='http://google.com'>here.</a>"
    }

]

server.js

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8090);
console.log('Server available at http://localhost:8080');