title: Need to Default select an Angular JS Radio Button
body: <p>I am new to Angular JS and I am trying to create a set of radio buttons.  Creating the buttons was the easy part, but I am having problems figuring out how to default select one of them without breaking everything.  I have read about using ngChecked in the Angular docs and on multiple other stackoverflow questions but still can't quite seem to figure it out.</p>
  
  <p>What I need to do is have one of the descriptions preselected when the user comes to the page. The price, discount, and deal_value also need to be shown with the values from the preselected price_option object. </p>
  
  <p>Here is the code that I am trying to get to work: <a href="http://jsfiddle.net/qWzTb/311/" rel="noreferrer">http://jsfiddle.net/qWzTb/311/</a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;body ng-app="demoApp"&gt;
      &lt;div ng-controller="DemoController" ng-init="init([{qty: 1, price:10, qty_description:'descrip 1', discount:'1%', deal_value:200}, {qty: 2, price:7, qty_description:'descrip 2', discount:'5%', deal_value:100}])"&gt;  
  
         &lt;div&gt;
             &lt;label ng-repeat="price_option in price_options"&gt;
                &lt;input type="radio" ng-model="init.price_option" ng-value="price_option" ng-checked="selected_price_option" name="quantity"/&gt;
                {{ price_option.qty_description }}
             &lt;/label&gt;
             &lt;ul&gt;
                &lt;li&gt;{{ init.price_option.price }}&lt;/li&gt;
                &lt;li&gt;{{ init.price_option.discount }}&lt;/li&gt;
                &lt;li&gt;{{ init.price_option.deal_value }}&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>angular.module('demoApp', []).controller('DemoController', function($scope) {
  
    $scope.init = function(prices) {
      $scope.price_options = prices;
      $scope.selected_price_option = $scope.price_options[0];
    };
  });
  </code></pre>