Search code examples
javascriptangularjsangular-ngmodelangularjs-ng-options

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


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.


Solution

  • 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.