Angular Bootstrap Datepicker - Disable all dates except a specified list

Question

I've been stuck on this issue for a couple of days now and I cannot find any suitable example online to help. I am getting a list of dates from a rest service that I need to make available within the angular datepicker to be selected. When I have this list I need to disable every other date in the datepicker. Here is my current code examples to show this -

Here is a plunker - https://plnkr.co/edit/8zncfr2VBayaO7wRFV4C?p=preview

HTML SNIPPET---

<div role="tabpanel" class="tab-pane" id="calender">
    <h3 class="map_tab_title"> Select Days </h3>
    <div uib-datepicker ng-model="date_pick" datepicker-options="options" date-disabled="disabled(data)">
    </div>
    <button type="submit" class="btn book_now_btn" ng-click="goToBookPage()">final step <span> input your information </span>    
    </button>
</div>

ANGULAR SNIPPET -

$scope.dates = response.data.outgoing.dates;
$scope.date_pick = Date.parse($scope.dates[0]);

$scope.today = function(){
    $scope.date_pick = new Date();
};
$scope.today();
$scope.options = {
    minDate: new Date(),
    showWeeks: false
};

function areDatesEqual(date1, date2) {
    return date1 == date2;
}
$scope.disabled = function(data) {
    console.log("TRIGGERED");
    var date = data.date,
        mode = data.mode;
    var isRealDate = false;
    for (var i = 0; i < $scope.dates.length; i++) {
        if (areDatesEqual($scope.dates[i], date)) {
            isRealDate = true;
        }
    }                
    return (mode === 'day' && isRealDate);
};

Can someone please help me with this. I am at a loss. Thanks in advance!

Answer 1

Thanks Hans for your answer - Here's what worked for me in the end -

https://plnkr.co/edit/P9bF18XemufyLXN75b7k?p=preview

HTML SNIPPET --

<div ng-controller="MainController">
    <h3> Select Days </h3>
    <div uib-datepicker ng-model="date_pick" datepicker-options="options">  
   </div>
</div>

ANGULAR SNIPPET --

$scope.dates = ["2016-09-26", "2016-09-28", "2016-09-29"];
$scope.date_pick = Date.parse($scope.dates[0]);

$scope.today = function() {
  $scope.date_pick = new Date();
};
$scope.today();

$scope.options = {
  dateDisabled: disabledTest,
  showWeeks: false
};

var dayDuration = 60 * 60 * 24 * 1000;

function areDatesEqual(date1, date2) {
  return (parseInt(date1 / dayDuration)) == (parseInt(date2 / dayDuration));
}

function disabledTest(data) {
  var date = data.date,
    mode = data.mode;

  var isRealDate = false;
  for (var i = 0; i < $scope.dates.length; i++) {
    var changedDate = Date.parse($scope.dates[i]);
    if (areDatesEqual(changedDate, date)) {
      isRealDate = true;
    }
  }
  return mode === 'day' && !isRealDate; // && (date >= $scope.endDate);
}