adding to existing array on click just empties the array why?

Question

Another angularJS question i have scope binding a click that should add one value on the first click ad another value on the second click but it just keeps returning and empty array and filling the first value again why? :

scope.dbclickalert = function (scope, $watch) {
    var getCheckInDate = this.cellData.date;
    var formatcheckindate = new Date(getCheckInDate);
    var checkingdates = [];
    var curr_datecell = formatcheckindate.getDate();
    var padded_day = (curr_datecell < 10) ? '0' + curr_datecell : curr_datecell;
    var curr_monthcell = formatcheckindate.getMonth() + 1;
    var padded_month = (curr_monthcell < 10) ? '0' + curr_monthcell : curr_monthcell;
    var curr_yearcell = formatcheckindate.getFullYear();
    var date_stringcell =  + padded_month + "/" + padded_day + "/" + curr_yearcell;
    var checkindatestrg = "checkindate";
    console.log(checkingdates.length);
    if (checkingdates.length < 2) {
        alert("element exists in array");
        checkingdates.push('checkoutdate');
        checkingdates.push(date_stringcell);
        console.log(checkingdates + checkingdates.length);
    } else {
        checkingdates.push('checkindate');
        checkingdates.push(date_stringcell);
    }
    var setCheckInDate = el.hasClass('checkInDate');
    if (checkingdates === true) {
        alert('You have allready set your check In Date');
    } else {
        el.addClass('checkInDate');
        $('#checkoutbar').addClass('datePickerchecout');
    }
    $(".date-cell").each(function removeclasses() {
        $(this).removeClass('true');
    });
    return getCheckInDate;
};

ok so when i declare this outside of the function i get undefined error:

   scope.checkingdates = [];
      scope.dbclickalert = function(scope, $watch){
         var getCheckInDate = this.cellData.date;
         var formatcheckindate = new Date(getCheckInDate);
         var checkingdates = scope.checkingdates;
         var curr_datecell = formatcheckindate.getDate();
         var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell;
         var curr_monthcell = formatcheckindate.getMonth() + 1;
         var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell;
         var curr_yearcell = formatcheckindate.getFullYear();
         var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
         var checkindatestrg = "checkindate";
         console.log(checkingdates.length);
           if (checkingdates.length < 2){
              alert("element exists in array");
              checkingdates.push('checkoutdate');
              checkingdates.push(date_stringcell);
              console.log(checkingdates+checkingdates.length);
          }else{
              checkingdates.push('checkindate');
              checkingdates.push(date_stringcell);
          }
         var setCheckInDate = el.hasClass('checkInDate');
          if (checkingdates === true){
              alert('You have allready set your check In Date');
          } else{
              el.addClass('checkInDate');
              $('#checkoutbar').addClass('datePickerchecout');
          }
             $(".date-cell").each(function removeclasses() {
                $(this).removeClass('true');
             });
              return getCheckInDate;
      };

ok in the third version of this it the same data "the date" again if the same div has been clicked but not if a second div with the same ng-click="dbclickalert()" is clicked why?

link: function(scope, el, attributes, dateSheetCtrl, $watch) {
          scope.checkingdatesarry = [];
  scope.dbclickalert = function(){
                 var getCheckInDate = this.cellData.date;
                 var formatcheckindate = new Date(getCheckInDate);
                 var checkingdates = scope.checkingdates;
                 var curr_datecell = formatcheckindate.getDate();
                 var padded_day = (curr_datecell < 10) ? '0'+curr_datecell : curr_datecell;
                 var curr_monthcell = formatcheckindate.getMonth() + 1;
                 var padded_month = (curr_monthcell < 10) ? '0'+curr_monthcell : curr_monthcell;
                 var curr_yearcell = formatcheckindate.getFullYear();
                 var date_stringcell = + padded_month + "/" + padded_day + "/" + curr_yearcell;
                 var checkindatestrg = "checkindate";
                 var checkoutdatestrg = "checkoutdate";


                if( $.inArray('checkindate', scope.checkingdates) !== -1 )  {
                     scope.checkingdatesarry.push(checkoutdatestrg);
                      scope.checkingdatesarry.push(date_stringcell);
                      console.log(scope.checkingdatesarry + scope.checkingdatesarry.length);


                }
                else{
                scope.checkingdatesarry.push(checkindatestrg);
                      scope.checkingdatesarry.push(date_stringcell);
                      console.log(scope.checkingdatesarry + scope.checkingdatesarry.length);


                  }


                 var setCheckInDate = el.hasClass('checkInDate');
                  if (scope.checkingdates === true){
                      alert('You have allready set your check In Date');
                  } else{
                      el.addClass('checkInDate');
                      $('#checkoutbar').addClass('datePickerchecout');
                  }
                     $(".date-cell").each(function removeclasses() {
                        $(this).removeClass('true');
                     });
                     return  scope.checkingdatesarry;
  };

ok for anyone that cares the answer was that because my div's where being created with a angularJS directive it was returning and array per div instead of one global array I have taken the array all the way out of the directive and moved it into a service and it works fine.

Answer 1

Because you redefined the array with empty list in the dbclickalert action. So every time when the action is triggered, the array will be empty.

var checkingdates = [];

You should move it outside the function and declare as

$scope.checkingdates = [];  //In your code, you may use scope.checkingdates = []; if you renamed the $scope when you inject it