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 arrays.dates">
         {{ 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', [])
    .controller('ParentCtrl', ParentCtrl)

function ParentCtrl($scope, $locale) {
    
    var englishMonths = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
    var frenchMonths =  ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
        'octobre', 'novembre', 'décembre'];
    
    $scope.arrays = {
        dates: []
    };
    $scope.currentDate = 'english';
    
    $scope.addDate = function(){
      $scope.arrays.dates.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 = monthArray;
        $scope.arrays.dates = renewInstancesOfArrayOfDates($scope.arrays.dates);
    };
    
    var renewInstancesOfArrayOfDates = function(array) {
        var temp = [];

        angular.forEach(array, function(t) {
            temp.push(new Date(t));
        });

        return temp;
    };
}