How to bind dynamic object properties in HTML in AngularJS - nested expressions

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyController" class="container">
    
    <h1>Expression interpolation</h1>
    <p>
      The markup here demonstrates you cannot use nested expressions. 
      The blockquote below displays the text based on the value of the 
      selectbox. The model data looks as follows:
    </p>
    
    <pre><code>$scope.model = {
  selected: value,
  data: {
    key: value,
    key: value,
    /* ... */
  }
};</code></pre>
  
    <p>
      <a href="http://stackoverflow.com/questions/22353354/how-to-bind-dynamic-object-properties-in-html-in-angularjs" target="_blank">
        Related stackoverflow question
      </a>
    </p>
    
    <!-- 
      Ignore this select markup ... this example has nothing to do with
      dynamic forms and/or select boxes. It's pure to demonstrate you
      cannot use nested expressions.
    -->
    
    <div class="form-group">
      <label>Selected Framework</label>
      <select class="form-control" ng-model="model.selected">
        <option ng-repeat="(k,v) in model.data">{{ k }}</option>
      </select>
    </div>
    
    <!-- 
      This blockquote below makes no sense.
      You cannot have nested interpolated expressions
      Uncomment to get some spanking from angular (console) 
    -->
    
    <!-- 
    <blockquote>
      <p>{{ model.data[ {{ model.selected }}] }}</p>
      <p><small>{{ model.selected }}</small></p>
    </blockquote>
    -->
    
    <!-- 
      This blockquote works correct.
      Note: No nested '{{ }}'
    -->
    
    <blockquote>
      <p>{{ model.data[model.selected] }}</p>
      <p><small>{{ model.selected }}</small></p>
    </blockquote>
    
  </body>
</html>

// Code goes here

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

myApp.controller('MyController', function($scope) {
  $scope.model = {
    selected: 'angular',
    data: {
      angular: 'AngularJS is what HTML would have been, had it been designed for building web-apps.',
      jquery: 'jQuery is designed to change the way that you write JavaScript.',
      bootstrap: 'Sleek, intuitive, and powerful front-end framework for faster and easier web development.',
      knockout: 'Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM)'
    }
  };
});

/* Styles go here */