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

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoCtrl">
    <h1>Hello Plunker!</h1>
    
    <div class="grid__item-4">
                    <label class="result-item__label">Minimum Age</label>
                    <span class="result-item__content">{{minAge}}</span>
      
                </div>

    <div class="grid__item-6">
                            <label class="result-item__label">Minimum Age</label>
                            <select name="ageField"
                            ng-model="minAge"
                            ng-options="minAge.value as minAge.key for minAge in minAgeList">
                            </select>
                            </div>
  </body>

</html>

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

app.controller('demoCtrl', function ($scope, $http, dataFact) {
    $scope.minAge = 0;
    $scope.maxAge = 99;
    $scope.minAgeList = dataFact.dataDetails.minAgeData();
    
        
});

app.factory('dataFact', dataFact);
    function dataFact() {
  var minAgeData = function () {
            var minAgeArray = [];
            
            minAgeArray.push({
                "value": 0,
                "key": "No Minimum Age"
            });

            for (var i = 1; i <= 115; i++) {
                var label = i;
                if (i < 10) {
                    label = "0" + i;
                }

                minAgeArray.push({
                    "value": i,
                    "key": label
                })
            }

            return minAgeArray;
        };
        
        var service = {
          dataDetails: { 
            minAgeData: minAgeData
          }
        }
        return service;
}


/* Styles go here */