Selected city change on every page refresh and need to set again

Question

User from front page ,select the city from below list and as per search product are displayed.

But after the every product displayed , page reload and City selected get changed to First city and user need to select again city for every search.

Need help how to overcome this issue and set the city to user selected ,not refreshed every time .

//Define an angular module for our app
var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('autocompleteController', function($scope, $http) {

    $scope.cities = [
        {name: 'London'},
        {name: 'Paris'},
        {name: 'Newyork'},
    ];
    $scope.selectedCities = $scope.cities[0];
    var initalizeproduct = function() {
        $scope.products = $http.get("/getproduct/"+$scope.selectedCities.name).success(function(data){
            $scope.products = data.products;
        });
    }
    initalizeproduct($scope.products);
    $scope.changeCity = function() {
        initalizeproduct();
    }
    $scope.onSelectPart = function (item) {
        $scope.selectedproducts = item;
        window.location.href = "/product/"+$scope.selectedproducts.fields.slug;
    };

});

From HTML Page :

<select ng-model="selectedCities" ng-change="changeCity()" ng-options="cities.name for cities in cities" style="background :transparent; border:0px; outline: none;">
            </select>

Answer 1

Replace window.location.href = "..."; with:

$http
    .get("/product/"+$scope.selectedproducts.fields.slug)
    .then(function( ̶d̶a̶t̶a̶ response) {
       var data = response.data; 
       // Get the HTML part from 'data' that you would like to display and add it to DOM
    });

to begin with.