How can I include form fields as an ng-include inside form?

Question

Relatively new to Angular, and trying to create a form that is used for both create and edit operations. There are forms fields that I am hoping to share, but from what I understand ng-include creates a new scope, so my fields (using ng-model) are not bound to the original scope. The result is that when the form is submitted my fields are not sent in.

If I am going about this the wrong way, please direct me to any documentation that might be of assistance. Part of my problem is I am not sure where to look at this point. Thanks!

Create Form

<section data-ng-controller="AlbumsController">
  <div class="page-header">
    <h1>New Album</h1>
  </div>
  <form data-ng-submit="create()">
    <section data-ng-include="'/modules/albums/views/form.html'"></section>
    <input type="submit" class="btn btn-primary" value="Add Album">
  </form>
</section>

Form Partial

<fieldset class="well">
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <div class="controls">
      <input type="text" data-ng-model="album.name" id="name" class="form-control" placeholder="Name" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="name">Album Picture</label>
    <div class="controls">
      <input type="text" data-ng-model="album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="releaseDate">Release Date</label>
    <div class="controls">
      <input type="date" data-ng-model="album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="sku">SKU</label>
    <div class="controls">
      <input type="text" data-ng-model="album.sku" id="sku" class="form-control" placeholder="SKU" required>
    </div>
  </div>
</fieldset>

Answer 1

change: <section data-ng-include="'/modules/albums/views/form.html'"></section>

to: <section data-ng-include src="'/modules/albums/views/form.html'"></section>

Answer 2

As I see, you do it right. What you may left is you need to define $scope.album on the $scope before use it on child scope.

$scope.album = {}; // set it on your AlbumsController

Answer 3

I have the same problem with you, in my solution, I used parent scope to bind data at child view. Like this:

<fieldset class="well">
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <div class="controls">
      <input type="text" data-ng-model="$parent.album.name" id="name" class="form-control" placeholder="Name" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="name">Album Picture</label>
    <div class="controls">
      <input type="text" data-ng-model="$parent.album.picture" id="picture" class="form-control" placeholder="Album Picture" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="releaseDate">Release Date</label>
    <div class="controls">
      <input type="date" data-ng-model="$parent.album.releaseDate" id="releaseDate" class="form-control" placeholder="Release Date" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label" for="sku">SKU</label>
    <div class="controls">
      <input type="text" data-ng-model="$parent.album.sku" id="sku" class="form-control" placeholder="SKU" required>
    </div>
  </div>
</fieldset>

It's ugly, but work's good for me.