0

I am using AngularJS v1.4.3 and Bootstrap v3.3.6.

I have created a list of radio buttons like below

<div>
    <label>Pizza</label>
    <ul ng-repeat="option in pizzaOptions">
        <input type="radio" name="pizza" ng-model="pickedPizza" 
           ng-value="{{option}}">
        {{option.displayText}}
    </ul>
</div>

ngModel- pickedPizza is an object.

When selecting an option the user's selection is saved correctly. The radio button shows the user has selected an option. Once the user navigates to the next page and back the option is no longer selected although ngModel is still populated correctly.

When the ngModel is not an object and I do not need to use ngValue (like below), navigating away from the page and back repopulates the selection fine. 

<div>
    <label>Drink</label>
    <ul ng-repeat="option in drinkOptions">
        <input type="radio" name="drink" 
           ng-model="drinkSelected" value="{{option}}">
        {{option}}
    </ul>
</div>
kcameron
  • 21
  • 2
  • 3
    Could you post a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) of what you're trying to do? What's the structure of `pickedPizza` object? – lealceldeiro Mar 09 '17 at 20:36
  • 1
    Possible duplicate of [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). Always use a dot (`.`) in your `ng-model` – georgeawg Mar 09 '17 at 21:23

1 Answers1

0

As georgeawg said, the model needs to be a dot object so instead of $scope.pickedPizza = {displayText: 'cheese'} it needs to be $scope.pickedPizza = { value : {displayText: 'cheese'} }; and ng-model='pickedPizza.value' or something similar.

Demo

charliebeckwith
  • 1,449
  • 11
  • 29