How to use brower.get() in protractor

I was using Protractor to test dropdown selection. The code is following:

var productCountry = element(by.model('main.productCountry1'));
productCountry.click();
var country = element.all(by.repeater('country in countries'));
country.get(5).click();
browser.sleep(500);

The error is:

Stack:
ElementNotVisibleError: element not visible
  (Session info: chrome=44.0.2403.81)`

I used code to see the data inside array [names]:

var names =element.all(by.repeater('country in countries').column('country.name'));
names.getText().then(function(txt){
    console.log(txt);
});

And the result shows the array looks like this:

['','', '', '', '', .....,'','Kenya','Kiribati',....,'','','','']

Only can get a part of elements, other elements are all empty. And I run several times，each time the empty parts are different. I used the first line code

browser.get('dist/#');
browser.get('app/index.html');

to get into the webpage. If I run the above second line code, there is a 'Not Found' shown on the website,and the error is:

Stack:
Error: Failed: Error while running testForAngular: asynchronous script timeout: result was not received in 11 seconds
  (Session info: chrome=44.0.2403.81)

Does this caused the element empty? The example I saw online always used the second line browser.get(). Is there any one used the first method?

I found If changed the data in $scope.country in scr/app/tab/main.controller, when I run gulp serve, the options in selection changed, but when I run protractor and get from the dist/#, the options are not changed. I guess it maybe caused the element empty. And I used yeoman to generate the files.