AngularJS 1.4.x

var app = angular.module('plunker', ['ngMaterial']);
var scope;

app.controller('MainCtrl', function($scope) {
  scope = $scope;
  $scope.createVPSBundle = function(name, cpu, ram, ssd, bandwidth, staticIP, price) {
    return {
      name: name,
      cpu: cpu,
      ram: ram,
      ssd: ssd,
      bandwidth: bandwidth,
      staticIP: staticIP,
      price: price
    };
  };

  $scope.createCfgItem = function(name, type, desc, unit, unitName, pricePerUnit, defaultV, minV, maxV, currency) {
    currency = currency || 'AUD';
    switch (type) {
      case 'number':
        return $scope.createScalableItem(name, type, desc, unit, unitName, pricePerUnit, defaultV, minV, maxV, currency);
        break;
      case 'onoff':
        return $scope.createCfgOnOffItem(name, type, desc, pricePerUnit, currency);
        break;
    }
  };
  $scope.createScalableItem = function(name, type, desc, unit, unitName, pricePerUnit, defaultV, minV, maxV, currency) {
    return {
      name: name,
      type: type,
      desc: desc,
      unit: unit,
      unitName: unitName,
      pricePerUnit: pricePerUnit,
      min: minV,
      max: maxV,
      value: defaultV,
      currency: currency,
    };
  };


  $scope.createCfgOnOffItem = function(name, type, desc, price, currency) {
    return {
      name: name,
      type: type,
      desc: desc,
      value: 0,
      price: price,
      currency: currency,
    };
  };

  $scope.bundles = [
    $scope.createVPSBundle('SSD 1', 1, 1, 20, 30, 'Y', 40),
    $scope.createVPSBundle('SSD 2', 1, 1, 40, 50, 'Y', 50),
    $scope.createVPSBundle('SSD 3', 2, 2, 60, 100, 'Y', 100),
    $scope.createVPSBundle('SSD 4', 2, 4, 80, 150, 'Y', 140),
    $scope.createVPSBundle('SSD 5', 3, 6, 120, 200, 'Y', 180),
    $scope.createVPSBundle('SSD 6', 3, 8, 160, 250, 'Y', 220),
    $scope.createVPSBundle('SSD 7', 4, 10, 200, 350, 'Y', 300),
    $scope.createVPSBundle('SSD 8', 4, 12, 250, 500, 'Y', 420),
    $scope.createVPSBundle('SSD 9', 4, 12, 300, 750, 'Y', 620),
    $scope.createVPSBundle('SSD 10', 4, 16, 400, 1000, 'Y', 800),
  ];

  $scope.selectedBundle = $scope.bundles[0];
  $scope.selectBundle = function(bundleIndex) {
    $scope.selectedBundle = $scope.bundles[bundleIndex];

    $scope.selectedCfgItems = [];
    $scope.selectedCfgItems.push($scope.selectedBundle.cpu);
    $scope.selectedCfgItems.push($scope.selectedBundle.ram);
    $scope.selectedCfgItems.push($scope.selectedBundle.ssd);
    $scope.selectedCfgItems.push($scope.selectedBundle.bandwidth);

    //set minimum amount
    angular.forEach($scope.selectedCfgItems, function(amount, idx) {
      var citem = $scope.cfgItems[idx];
      citem.min = amount;
    });


  };

  $scope.cfgItems = [
    $scope.createCfgItem('CPU', 'number', '', 1, 'Core', 10, 1, 1, 24),
    $scope.createCfgItem('RAM', 'number', '', 1, 'GB', 20, 1, 1, 40),
    $scope.createCfgItem('SSD', 'number', '', 1, 'GB', 1, 20, 20, 500),
    $scope.createCfgItem('Bandwidth', 'number', '', 1, 'GB', 1, 30, 30, 4000),

    //$scope.createCfgItem('RAM','onoff','',1,'GB',10,1,1,16),
  ];
  $scope.selectedCfgItems = [];
  angular.forEach($scope.cfgItems, function(item) {
    $scope.selectedCfgItems.push(item.value);
  });




});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css" media="all" type="text/css" rel="stylesheet">

  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.min.js" data-semver="1.4.8"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular-animate.min.js" data-semver="1.4.8"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular-aria.min.js" data-semver="1.4.8"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular-messages.min.js" data-semver="1.4.8"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script>
  <script src="app.js"></script>
</head>

<body >
  <div ng-controller="MainCtrl" ng-cloak>

    <table class="data-table">
      <tbody>
        <tr>
          <th>Package</th>
          <th>CPU</th>
          <th>Dedicated RAM</th>
          <th>SSD Disk Space</th>
          <th>Data Transfer</th>
          <th>Static IP</th>
          <th>Monthly Fee</th>
        </tr>
        <tr ng-class="(selectedBundle==bundle)?'active':'hl'" ng-repeat="bundle in bundles track by $index" ng-click="selectBundle($index)">
          <td>{{bundle.name}}</td>
          <td>{{bundle.cpu}}Cores</td>
          <td>{{bundle.ram}}GB</td>
          <td>{{bundle.ssd}}GB</td>
          <td>{{bundle.bandwidth}}GB</td>
          <td class="icon-ok-2"></td>
          <td>${{bundle.price}}</td>
        </tr>
      </tbody>
    </table>
    <md-content>
      <div ng-repeat="item in cfgItems track by $index">

        <div layout="" ng-if="item.type == 'number'">
          <div flex="30" layout="" layout-align="center center">
            <span class="md-body-1">min value:{{item.min}} - {{item.name}} ({{item.unitName}})</span>
          </div>
          <md-slider flex ng-model="selectedCfgItems[$index]" step="{{item.unit}}" min="{{item.min}}" max="{{item.max}}" aria-label="rating" ng-change="calculateTotal()">
          </md-slider>
          <div flex="20" layout="" layout-align="center center">
            <input flex type="number" ng-model="selectedCfgItems[$index]" aria-label="red" step="{{item.unit}}" min="{{item.min}}" max="{{item.max}}">
          </div>
        </div>
      </div>


    </md-content>


  </div>
</body>

</html>

/* Put your css in here */