AngularJS - Form scope binding in ng-include templates

Question

I'm fairly new to Angular and I have been porting a webform from Zurb's foundation and nasty JQuery to Angular. I'm attempting to load each section of my webform as a template, while still binding the fields to the scope.

The sections of the form are dynamically included from a json object which stores basic information about each section:

app.coffee:

app = angular.module('plunker', []);

app.controller 'MainCtrl', ($scope) ->
  # pre-loaded form data
  $scope.data =
    primInv:
      vacation: false
    funding_opportunity:
      sponsor: "sponsor name"

  # details about different sections of the form
  $scope.sections = [
    {
      name: "Principal Investigator"
      details: "Please explain who you are and when you need funding."
      formSection: "principal-investigator"
    }
    {
      name: "Funding Opportunity"
      details: "Please provide information about the funding opportunity to which you plan to apply."
      formSection: "funding-opportunity"
    }
  ]

  # get the url for the section template
  $scope.sectionUrl = ($index) ->
    return $scope.sections[$index].formSection + '-section.html'

index.html body:

<form name="mainForm"
  data-abide
  ng-controller="MainController"
  novalidate>

<div ng-repeat="section in sections track by $index">
  <seperator ng-if="$index > 0"></seperator>
  <div class="row">
    <div class="large-4 medium-12 columns">
      <div class="row">
        <h4>{{ section.name }}</h4>
      </div>
      <div class="row">
        <p>{{ section.details }}</p>
      </div>
    </div>

    <p>{{ sectionUrl($index) }}</p>
    <div class="large-8 medium-12 columns">
      <div ng-include src="sectionUrl($index)"></div>
    </div>
  </div>
</div>

The first section works perfectly, as I enter into the input fields, the scope is updated and we can see it in a test element.

sample input from principal-investigator-section.jade:

label(for='era_commons_id')
  | eRA Commons ID
  small if Federal
  input(type='text',
        ng-model='data.prinInv.federal_id')

The second section doesn't work at all. Nothing seems to bind. What am I doing wrong here?

sample input from funding-opportunity-section.jade

label(for="funding_opportunity")
  | Funding Opportunity
  input(type="text",
        ng-model: 'data.funding_opportunity.details',
        name="funding_opportunity",
        placeholder="Funding Opportunity")

I'm sure this is a rookie question as I'm fairly new to angular, but I've been working on this for a while and its starting to drive me nuts!

All of the additional pages including the included sections are available on the Plunker

Answer 1

A plunkr would be nice to actually test your code, but I noticed a typo in your example code:

ng-model: 'data.funding_opportunity.details',

should be

ng-model='data.funding_opportunity.details',

Check if it works by correcting the typo and otherwise please provide a working example