Angular: Empty Fiddle

http://angularjs.org/

by ltfleming

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <h1>
    {{product.name}}
  </h1>

  <select ng-model="selectedOption" ng-options="option.productName for option in product.options">
    <option value="">-- choose option --</option>
  </select>

  <div ng-if='selectedOption'>
    <p>
      <label for="">Product ID: </label> {{selectedOption.productId}} </p>
    <p>
      <label for="">Description: </label> {{selectedOption.productDescription}} </p>
    <p>
      <label for="">Price: </label> {{selectedOption.productPrice}} </p>
  </div>
  <img ng-src="{{selectedOption.productImage}}" alt="image">
</div>

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {


  $scope.product = {
    name: 'Flour',
    options: [{
      "categoryId": 0,
      "discountPrice": 100,
      "productDescription": "Abc",
      "productId": "2N04L1O4L4",
      "productImage": "image1.jpg",
      "productName": "Abc",
      "productPrice": 200,
      "productUnit": "1kg",
      "quantity": 0
    }, {
      "categoryId": 0,
      "discountPrice": 300,
      "productDescription": "abc",
      "productId": "2N04L1O4L4",
      "productImage": "http://image1.jpg",
      "productName": "Abc",
      "productPrice": 400,
      "productUnit": "2kg",
      "quantity": 0
    }, {
      "categoryId": 0,
      "discountPrice": 500,
      "productDescription": "good",
      "productId": "A0091JNG4O",
      "productImage": "image2.jpg",
      "productName": "Xyz",
      "productPrice": 500,
      "productUnit": "1kg",
      "quantity": 0
    }, {
      "categoryId": 0,
      "discountPrice": 250,
      "productDescription": "Demo",
      "productId": "QQ769GPQJ2",
      "productImage": "image33.jpg",
      "productName": "Toor dal",
      "productPrice": 250,
      "productUnit": "1kg",
      "quantity": 0
    }]
  };

}