Angular Example

Test

HTML

<div ng-app="myApp" ng-controller="BoxController">
    <table class='table'>
        <thead>
            <tr style="border:1px solid black;">
                <td style="border:1px solid black;">id</td>
                <td style="border:1px solid black;">type</td>
                <td style="border:1px solid black;">contains</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-click="setCurrentBox('1');">
                <td>1</td>
                <td>Black</td>
                <td>2 <!--I don't know how to get this value--></td>
            </tr>
        </tbody>
    </table>
  <edit-form></edit-form>
</div>

JavaScript

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

app.controller('BoxController',['$scope','BoxService',function ($scope,BoxService) {
  $scope.currentBox = {};
  $scope.setCurrentBox = function(id){
    //To shorten the example. But data should come from Service declared below
    BoxService.getBoxItem(id,function(back){
      $scope.currentBox = back;
    });
  };
}]);

app.directive('editForm',function(){
	return {
    	restrict : 'E',
        template : '<div class="editor">'
    +'<div> Id : <label>{{currentBox.id}}</label></div>'
    +'<div> Type : <label>{{currentBox.type}}</label></div>'
    +'<div id="boxes" style="border:1px solid red;">'
    +'Here I SHOULD display the SELECTS... FOR EACH BOX<br/>If the -last-box can contain another box, then I should have an empty box ready to receive edits, considering the box containing capabilities. And if user sets NO box in a higher level, then the lower selects should just disappear... and so on... like a -interactive- form'
    +'</div>'
    +'</div>'
    };
});

app.factory('BoxService',['$http',function($http){
  return {
    getBoxItem : function(id,callback){
    	$http({
        	method : 'POST',
            url : '/echo/json/',
            data : {'id':id}
        })
        .success(function(data){
        		callback({"id":1,"type":"black","box":{"id":8,"type":"red","box":{"id":15,"type":"green","box":null}}});
        })
        .error(function(err){
        		callback(err);
        });
    }
  };
}]);