AngularJS - scope not refreshing when change route - angularjs

Question

At first sorry for subject name, I didn't knew how to call it. I was searching for an answer but found nothing helpful or didn't knew how to implement this in my little app. I'm learning AngularJS and i thought a "drink counter" will be good for beginning. So all my app is supose to do is when you click a drink icon it adds an item(type of drink and datetime when) and the problem is that it isn't refreshing the drink list when I change route to /#archive/ it only does when I refresh page, my code is:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'myController',
templateUrl: 'Views/home.html'
})
.when('/archive',
{
controller: 'myController',
templateUrl: 'Views/archive.html'
})
.otherwise({ redirectTo: '/' });
});
myApp.factory('myFactory', function () {
var saved = localStorage.getItem('myData');
var drinks = (localStorage.getItem('myData') !== null) ? JSON.parse(saved) : [];
localStorage.setItem('myData', JSON.stringify(drinks));
var factory = {};
factory.getDrinks = function () {
return drinks;
};
return factory;
});
var controllers = {};
controllers.myController = function ($scope, myFactory, $filter) {
$scope.drinks = [];
init();
function init() {
$scope.drinks = myFactory.getDrinks();
$scope.beerDrinked = $filter('filter')($scope.drinks, 'beer').length;
}
$scope.nowDrinking = function (what) {
$scope.drinks.push({
drinkDate: new Date(),
what: what
});
localStorage.setItem('myData', JSON.stringify($scope.drinks));
};
}
myApp.controller(controllers);
Yes, sure. This is my HTML in archive:
<ul class="drinked" data-ng-repeat="drink in drinks | orderBy: 'drinkDate':true track by $index">
<li class="{{ drink.what }}"><span class="date">{{ drink.drinkDate | date: 'EEEE, d MMMM yyyy' }}</span><span class="time">{{ drink.drinkDate | date: 'HH:mm:ss'}}</span></li>
</ul>
And this is in home:
<span data-ng-bind="beerDrinked"></span>
beer

Answer 1

if you want to refresh your html, you´ve to use ng-repeat, example:
<div class="drinks" data-ng-repeat="drink in drinks"></div>
I don´t know where the user have to click to refresh you page, but to do this you´ve to use data-ng-click directive, example:
<button data-ng-click="addDrink(someDrink)"></button>
So in your controller should be like this, example:
app.controller('MyController', function ($scope) {
$scope.drinks = [];
$scope.addDrink= function (drink) { //note that you don´t need(and don´t should) to pass your drink by parameter...
$scope.drinks.push(drink);
}
});

Answer 2

here, put your ng-repeat inside your li element, like this:
<ul class="drinked">
<li data-ng-repeat="drink in drinks | orderBy: 'drinkDate':true track by $index" class="{{ drink.what }}"><span class="date">{{ drink.drinkDate | date: 'EEEE, d MMMM yyyy' }}</span><span class="time">{{ drink.drinkDate | date: 'HH:mm:ss'}}</span></li>
</ul>
Try it!