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

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="AppCtrl">
    <div class="input-group col-sm-12 col-md-12 col-lg-12">
     <span style="min-width: 150px;" class="input-group-addon promo-select">Select Promo Code</span>
     <select id="offer_promo" name="offer_promo" class="form-control" ng-change="promoAction()"
             ng-model="promo"
             ng-options="p as p.Promo_Code + ' ( ' + p.Promo_Description + ' )' for p in promos">
         <option value="">Please Select A Promotion</option>
     </select>
    </div>
    
    <div class="input-group col-sm-12 col-md-12 col-lg-12">
     <span style="min-width: 150px;" class="input-group-addon promo-select">Select Additional Code</span>
     <select id="offer_promo" name="offer_promo" class="form-control"
             ng-model="additionalPromo"
             ng-options="p as p.Promo_Code + ' ( ' + p.Promo_Description + ' )' for p in additionalPromos">
         <option value="">Please Select A Promotion</option>
     </select>
    </div>
    
    <br>
    
    Selected Promo EXP Date: {{ promo.Promo_EXP }}
  </body>

</html>
angular.module("myApp", ["ui.bootstrap"])

.controller("AppCtrl", function($scope) {
  $scope.promos = [{
    "Promo_ID": 1,
    "Promo_Code": "FooBar24",
    "Promo_Description": "50% Off!",
    "Promo_EXP": "01/20/2018"
  }, {
    "Promo_ID": 2,
    "Promo_Code": "Another",
    "Promo_Description": "50% Off!",
    "Promo_EXP": "01/20/2019"
  }, {
    "Promo_ID": 3,
    "Promo_Code": "One More",
    "Promo_Description": "50% Off!",
    "Promo_EXP": "01/20/2020"
  }];

  $scope.promoAction = function() {
    function promosFilteredBy(date) {
      var filteredPromos = $scope.promos.filter(function(promo) {
        var promoDate = new Date(promo.Promo_EXP);
        return promoDate < date;
      });

      return filteredPromos;
    }

    var selectedPromoDate = new Date($scope.promo.Promo_EXP);
    $scope.additionalPromos = promosFilteredBy(selectedPromoDate);
  }
})
/* Styles go here */