AngularJS Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app="app">
 <div ng-controller="ParentCtrl">
     <button data-ng-click="addDate()">Add Date</button>     
     <button data-ng-click="switchDate()">Toggle Language, current: {{ currentDate }}</button>   
     <hr></hr>
     <div data-ng-repeat="date in array">
         {{ date | date:'longDate' }}
     </div>
     <hr></hr>
     <p>To start click addDate, then click the language toggle to french and add another date. Notice the new date is in french but the old one does not update.</p>
 </div>
</div>

JavaScript

angular.module('app', [])
.config(function($provide){
  $provide.decorator('dateFilter', function($delegate){
      $delegate.$stateful = true;
      return $delegate;
  });
})
.controller('ParentCtrl', ParentCtrl)

function ParentCtrl($scope, $locale){
    console.log($locale);
    var englishMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var frenchMonths = ["janvier", "f\u00e9vrier", "mars", "avril", "mai", "juin", "juillet", "ao\u00fbt", "septembre", "octobre", "novembre", "d\u00e9cembre"];
    
    $scope.array = [];
    $scope.currentDate = 'english';
    
    $scope.addDate = function(){
      $scope.array.push(new Date());  
    };
    $scope.switchDate = function(){
        var monthArray = englishMonths
        if($scope.currentDate === 'english'){
           monthArray = frenchMonths;
            $scope.currentDate = 'french';
        }
        else{
         $scope.currentDate = 'english';   
        }
        $locale.DATETIME_FORMATS.MONTH.length = 0;
        for(var x = 0; x < monthArray.length; x++){
            $locale.DATETIME_FORMATS.MONTH.push(monthArray[x] + ($scope.currentDate === 'french' ? "FRENCH" : ''));
        }
    };
}