Interpolating nested values from a scope variable in a view

So I have the following view:

<p type="text" disabled='true' class="form-control" >
  {{selected.timerange}}
</p>

The value of $scope.selected.timerange is:
{"available":false,"schedule_start_at":"2015-03-13T00:30:00","schedule_end_at":"2015-03-13T01:00:00"}

This works fine, but when I use the following view: 

<p type="text" disabled='true' class="form-control">
  {{selected.timerange.schedule_start_at}}
</p>

the interpolation does not happen.
I'm unable to figure out why. Any help please?

Your example works if you correctly set up angular. See fiddle

Make sure that :

  • The controller that is responsible for the second view is the same instance that the one responsible for the first view. If you instantiated the controller with the ngController directive, the instantiation should be on a common parent for both views.

By the way, please note that boostrap form-control class is usually for input elements, not for paragraphs.

Consider replacing :

<p type="text" disabled='true' class="form-control" >
    {{selected.timerange}}
</p>

with : 

<input type="text" disabled='true' class="form-control" value="{{selected.timerange}}"/>