AngularJS's ng-model does not bind selected value from drop-down menu (ng-options), also unable to reload page

Question

Basically, I have a web server running on localhost, and I want to exchange data between my AngularJS web app and my server. I successfully transfer the data, but displaying it properly is a problem.

I've made a simplified plunkr version of my AngularJS application...

Obviously, you don't have the server side code, but you do not need it. As said in plunkr i have more than one problem:

• I can't reload page using $route.reload() , I also tried with $window.location.reload(true) , $window.location.href = $window.location.href ... nothing worked so far
• Also, ng-model in ng-options doesn't bind data. If I enter debugger when calling sendData, tempData is defined but selectedListItem is not (even though I selected a value from drop-down menu)

Any advice is more than welcome,

Thank you for your time.

Answer 1

See the AngularJS tutorial on routing and views:

https://docs.angularjs.org/tutorial/step_07

Answer 2

Regarding the 3 problems you mention:

1.Page reload doesn't work

You can't use $route.reload() if you are not using ngRoute and you haven't configured any routes.
(BTW, adding ngRoute as a dependency, while not including the relevant JS script will raise errors.)

---

2. ngModel doesn't bind data to selectedListItem

This seems to work as expected once you fix the other errors (see demo below).

---

3. Can't set dropdown menu to default value

This seems to work as expected once you fix the other errors (see demo below).

---

See, also, this short demo .