gistfile1.haml

/ Form with nested has_and_belongs_to childs (with Add / Edit / Remove of childs) in pure AngularJS
/
/ Site <--> SiteSocialNetwork (url) <--> SocialNetwork (name)
/
/ SocialNetwork (field :name)
/ Site embeds_many :site_social_networks
/ SiteSocialNetwork (field :url) belongs_to :site_network

:javascript
  function SocialNetworkCtrl($scope) {
    $scope.site_social_networks = #{f.object.site_social_networks.to_json.html_safe};
    $scope.social_networks = #{SocialNetwork.all.map { |s| { value: s.id, label: s.name } }.to_json.html_safe};

    $scope.add = function() {
      $scope.site_social_networks.push({});
    };

    $scope.remove = function(index) {
      $scope.site_social_networks[index].deleted = true;
      if($scope.site_social_networks[index]._id) {
        $scope.site_social_networks[index].deleted_id = true;
      }
    };
  }


%div(ng-controller="SocialNetworkCtrl")
  %div(ng-repeat="site_social_network in site_social_networks")
    %div(ng-switch on="!!site_social_network.deleted")
      .control-group(ng-switch-when="false")
        .controls
          %label Network:
          %input(type="text" ng-model="site_social_network.url" name="site[site_social_networks_attributes][][url]")
          %select(ng-model="site_social_network.social_network_id" ng-options="s.value as s.label for s in social_networks")
          %input(type="hidden" name="site[site_social_networks_attributes][][social_network_id]" value="{{site_social_network.social_network_id}}")

          %a(ng-click="remove($index)") Remove

    %div(ng-switch on="!!site_social_network._id")
      %input(type="hidden" ng-switch-when="true" name="site[site_social_networks_attributes[][_id]" value="{{site_social_network._id}}")
    %div(ng-switch on="!!site_social_network.deleted_id")
      %input(type="hidden" ng-switch-when="true" name="site[site_social_networks_attributes[][_destroy]" value="true")

  .control-group
    .controls
      %a(ng-click="add()") Add

Result : http://cl.ly/image/2B3c1h282H2u