Working Form
diff --git a/views/ngXosLib/xosHelpers/spec/ui/form.test.js b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
index eac10f5..19fc438 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/form.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
@@ -130,7 +130,7 @@
           expect($(element).find('[name="email"]')).toHaveAttr('type', 'email');
         });
 
-        describe('the boolean field', () => {
+        describe('the boolean field test', () => {
 
           let setFalse, setTrue;
 
@@ -140,6 +140,7 @@
           });
 
           it('should change value to false', () => {
+            console.log(isolatedScope.ngModel.enabled);
             expect(isolatedScope.ngModel.enabled).toEqual(true);
             setFalse.click()
             expect(isolatedScope.ngModel.enabled).toEqual(false);
diff --git a/views/ngXosLib/xosHelpers/src/services/rest/Images.js b/views/ngXosLib/xosHelpers/src/services/rest/Images.js
new file mode 100644
index 0000000..4fe9cb3
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/services/rest/Images.js
@@ -0,0 +1,15 @@
+(function() {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
+  * @name xos.helpers.Images
+  * @description Angular resource to fetch /api/core/images/
+  **/
+  .service('Images', function($resource){
+    return $resource('/api/core/images/:id/', { id: '@id' }, {
+      update: { method: 'PUT' }
+    });
+  })
+})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
index ac4ba4d..fa673c4 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
@@ -194,8 +194,8 @@
         if(!$attrs.ngModel){
           throw new Error('[xosField] Please provide an ng-model');
         }
-        if(this.field.type === 'select' && !this.ngModel){
-          this.ngModel = this.field.options[0].id;
+        if(this.field.type === 'select' && !this.ngModel ){
+          //this.ngModel = this.field.options[0].id;
         }
         this.getType = XosFormHelpers._getFieldFormat;
         this.formatLabel = LabelFormatter.format;
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
index 986e589..83a206a 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
@@ -171,15 +171,18 @@
             <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>
           </div>
           <div class="form-group" ng-if="vm.config.actions">
+            <!--<pre>{{vm.config.feedback}} | json</pre>-->
+
+          <xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>
+
             <button role="button" href=""
               ng-repeat="action in vm.config.actions"
-              ng-click="action.cb(vm.ngModel)"
+              ng-click="action.cb(vm.ngModel, vm[vm.config.formName || 'form'])"
               class="btn btn-{{action.class}}"
               title="{{action.label}}">
               <i class="glyphicon glyphicon-{{action.icon}}"></i>
               {{action.label}}
             </button>
-
           </div>
         </form>
       `,
@@ -202,15 +205,27 @@
 
 
         this.formField = [];
-        $scope.$watch(() => this.ngModel, (model) => {
+        $scope.$watch(() => this.config, ()=> {
 
+
+
+          if(!this.ngModel){
+            return;
+          }
+          let diff = _.difference(Object.keys(this.ngModel), this.excludedField);
+          let modelField = XosFormHelpers.parseModelField(diff);
+          this.formField = XosFormHelpers.buildFormStructure(modelField, this.config.fields, this.ngModel);
+
+
+        } ,true);
+
+
+        $scope.$watch(() => this.ngModel, (model) => {
           // empty from old stuff
           this.formField = {};
-
           if(!model){
             return;
           }
-
           let diff = _.difference(Object.keys(model), this.excludedField);
           let modelField = XosFormHelpers.parseModelField(diff);
           this.formField = XosFormHelpers.buildFormStructure(modelField, this.config.fields, model);
diff --git a/views/ngXosViews/tenant/gulp/server.js b/views/ngXosViews/tenant/gulp/server.js
index c0678d9..c1f7608 100644
--- a/views/ngXosViews/tenant/gulp/server.js
+++ b/views/ngXosViews/tenant/gulp/server.js
@@ -53,7 +53,7 @@
           if(
             // to be removed, deprecated API
             // req.url.indexOf('/xos/') !== -1 ||
-            // req.url.indexOf('/xoslib/') !== -1 ||
+             req.url.indexOf('/xoslib/tenant') !== -1 ||
             // req.url.indexOf('/hpcapi/') !== -1 ||
             req.url.indexOf('/api/') !== -1
           ){
diff --git a/views/ngXosViews/tenant/src/js/main.js b/views/ngXosViews/tenant/src/js/main.js
index 20cf2f0..a08764e 100644
--- a/views/ngXosViews/tenant/src/js/main.js
+++ b/views/ngXosViews/tenant/src/js/main.js
@@ -149,58 +149,131 @@
     bindToController: true,
     controllerAs: 'cs',
     templateUrl: 'templates/createslice.html',
-    controller: function(Slices, SlicesPlus, $stateParams){
+    controller: function(Slices, SlicesPlus, Sites, Images, $stateParams, $http, $state){
       //var sites;
       //console.log(this.users.name);
 
       //console.log(this.config);
       this.config = {
-        exclude: ['password', 'last_login'],
+        exclude: ['site', 'password', 'last_login', 'mount_data_sets', 'default_flavor', 'creator', 'exposed_ports', 'networks', 'omf_friendly', 'omf_friendly', 'no_sync', 'no_policy', 'lazy_blocked', 'write_protect', 'deleted', 'backend_status', 'backend_register', 'policed', 'enacted', 'updated', 'created', 'validators', 'humanReadableName'],
         formName: 'SliceDetails',
+        feedback: {
+          show: false,
+          message: 'Form submitted successfully !!!',
+          type: 'success'
+        },
         actions: [
           {
             label: 'Save',
             icon: 'ok', // refers to bootstraps glyphicon
-            cb: (user) => { // receive the model
-              console.log(user);
+            cb: (model, form) => { // receive the model
+              if (form.$valid )
+              {
+                if(model.id){
+                  var pr = Slices.update(model).$promise;
+                }
+                else{
+                  var pr = Slices.save(model).$promise;
+                }
+                pr.then((users) => {
+                  this.users = users;
+                  data = users;
+                  this.model = data;
+                  this.config.feedback.show = true;
+                  $state.go('site',{id : this.model.site});
+                })
+                .catch((e) => {
+                  this.config.feedback.show = true;
+                  this.config.feedback.type='danger';
+                  if(e.data)
+                  {
+                    console.log(e.data.detail);
+                    this.config.feedback.message = e.data.detail;
+                  }
+                  else {
+                    this.config.feedback.message=e.statusText;}
+                });
+              }
             },
             class: 'success'
           },  {
             label: 'Save and continue editing',
             icon: 'ok', // refers to bootstraps glyphicon
-            cb: (user) => { // receive the model
-              console.log(user);
+            cb: (model, form) => { // receive the model
+              if (form.$valid )
+              {
+                if(model.id){
+                  var pr = Slices.update(model).$promise;
+                }
+                else{
+                  var pr = Slices.save(model).$promise;
+                }
+                pr.then((users) => {
+                  this.users = users;
+                  data = users;
+                  this.model = data;
+                  this.config.feedback.show = true;
+                })
+                .catch((e) => {
+                  this.config.feedback.show = true;
+                  this.config.feedback.type='danger';
+                  if(e.data)
+                  {
+                    console.log(e.data.detail);
+                    this.config.feedback.message = e.data.detail;
+                  }
+                  else {
+                    this.config.feedback.message=e.statusText;}
+                });
+              }
             },
             class: 'primary'
           },
           {
             label: 'Save and add another',
             icon: 'ok', // refers to bootstraps glyphicon
-            cb: (user) => { // receive the model
-              console.log(user);
+            cb: (model, form) => { // receive the model
+              if (form.$valid )
+              {
+                if(model.id){
+                  var pr = Slices.update(model).$promise;
+                }
+                else{
+                  var pr = Slices.save(model).$promise;
+                }
+                pr.then((users) => {
+                  this.users = users;
+                  data = users;
+                  this.model = data;
+                  this.config.feedback.show = true;
+                })
+                .catch((e) => {
+                  this.config.feedback.show = true;
+                  this.config.feedback.type='danger';
+                  if(e.data)
+                  {
+                    console.log(e.data.detail);
+                    this.config.feedback.message = e.data.detail;
+                  }
+                  else {
+                    this.config.feedback.message=e.statusText;}
+                });
+              }
             },
             class: 'primary'
           }
         ],
         fields:
         {
-          site_select: {
+          site: {
             label: 'Site',
             type: 'select',
             validators: { required: true},
             hint: 'The Site this Slice belongs to',
-            options: [
-              {
-                id: 0,
-                label: '---Site---'
-              },
-              {
-                id: 1,
-                label: '---Site1---'
-              }]
+            options: []
 
           },
-          first_name: {
+          name: {
             label: 'Name',
             type: 'string',
             hint: 'The Name of the Slice',
@@ -208,7 +281,7 @@
               required: true
             }
           },
-          service_class: {
+          serviceClass: {
             label: 'ServiceClass',
             type: 'select',
             validators: {required: true},
@@ -283,12 +356,7 @@
             label: 'Default image',
             type: 'select',
             validators: { required: false},
-            options: [
-              {
-                id: 0,
-                label: 'trusty-server-multi-nic'
-              }
-            ]
+            options: []
           },
           network: {
             label: 'Network',
@@ -316,27 +384,48 @@
 
         }
       };
-
+      //console.log(this.config.exclude);
       var data;
+      Images.query().$promise
+          .then((users) => {
+            this.users = users;
+            data = this.users;
+            this.optionValImg = this.setData(data, {field1: 'id', field2: 'name'});
+            this.config.fields['default_image'].options = this.optionValImg;
+          })
+          .catch((e) => {
+            throw new Error(e);
+          });
+
+      // Use this method for select by seting object in fields variable of format { field1 : "val1", field2 : "val2"}
+      this.setData = (data, fields) => {
+        var i;
+        var retObj=[];
+        for(i = 0; i<data.length; i++){
+          var optVal = {id: data[i][fields.field1], label: data[i][fields.field2]};
+          retObj.push(optVal);
+
+        }
+        //console.log(retObj);
+        return retObj;
+      };
+
       // retrieving user list
+
       if ($stateParams.id)
       {
+        delete this.config.fields['site'];
+        this.config.exclude.push('site');
+
+        //console.log(this.config.exclude);
+
         Slices.get({id: $stateParams.id}).$promise
           .then((users) => {
             this.users = users;
             data = users;
-            this.model = {
-              first_name: data.name,
-              service_class: data.serviceClass,
-              enabled: data.enabled,
-              description: data.description,
-              service: data.service,
-              slice_url: data.slice_url,
-              max_instances: data.max_instances,
-              default_isolation: data.default_isolation,
-              default_image: data.default_image,
-              network: data.network
-            };
+            delete data.networks;
+
+            this.model = data;
           })
           .catch((e) => {
             throw new Error(e);
@@ -344,7 +433,36 @@
       }
       else
       {
+
+
         this.model = {};
+        $http.get('/xoslib/tenantview/').
+        success((data) => {
+          this.userList = data;
+          console.log(this.userList);
+          //this.model={}
+          this.model['creator'] = this.userList.current_user_id;
+
+        });
+
+
+
+
+
+
+        Sites.query().$promise
+      .then((users) => {
+        this.users_site = users;
+        //console.log(users);
+        this.optionVal = this.setData(this.users_site, {field1: 'id', field2: 'name'});
+        this.config.fields['site'].options = this.optionVal;
+        //= this.optionVal;
+
+      })
+      .catch((e) => {
+        throw new Error(e);
+      });
+
       }
     }
   };
diff --git a/views/ngXosViews/tenant/src/templates/slicelist.html b/views/ngXosViews/tenant/src/templates/slicelist.html
index 555d3dc..37b8550 100644
--- a/views/ngXosViews/tenant/src/templates/slicelist.html
+++ b/views/ngXosViews/tenant/src/templates/slicelist.html
@@ -1,6 +1,6 @@
 <!--<span ng-bind="siteNameSe"></span>-->
 <!--<xos-field></xos-field>-->
-
-<a class="addlink btn btn-info" ui-sref="createslice({site: sl.siteId})"><i class="glyphicon glyphicon-plus-sign"></i> Create Slice</a>
+<a class="addlink btn btn-info" ui-sref="createslice({site: sl.users[0].site})"><i class="glyphicon glyphicon-plus-sign"></i> Create Slice</a>
 <xos-table config="sl.tableConfig" data="sl.users"></xos-table>
-<!--<div ui-view="sliceDetails"></div>-->
\ No newline at end of file
+<!--<div ui-view="sliceDetails"></div>-->
+<!--<pre>{{sl.users[0].site}}</pre>-->
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index 9b41ea8..1823da1 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -1291,7 +1291,7 @@
         config: '=',
         ngModel: '='
       },
-      template: '\n        <form name="vm.{{vm.config.formName || \'form\'}}" novalidate>\n          <div class="form-group" ng-repeat="(name, field) in vm.formField">\n          <!--{{vm.ngModel[name] | json}}-->\n            <xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>\n            <!--<pre>{{vm[vm.config.formName] || \'form\'  | json }}</pre>-->\n            <!--{{field}}-->\n            <xos-validation field="vm[vm.config.formName || \'form\'][name]" form = "vm[vm.config.formName || \'form\']"></xos-validation>\n            <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>\n          </div>\n          <div class="form-group" ng-if="vm.config.actions">\n            <button role="button" href=""\n              ng-repeat="action in vm.config.actions"\n              ng-click="action.cb(vm.ngModel)"\n              class="btn btn-{{action.class}}"\n              title="{{action.label}}">\n              <i class="glyphicon glyphicon-{{action.icon}}"></i>\n              {{action.label}}\n            </button>\n\n          </div>\n        </form>\n      ',
+      template: '\n        <form name="vm.{{vm.config.formName || \'form\'}}" novalidate>\n          <div class="form-group" ng-repeat="(name, field) in vm.formField">\n          <!--{{vm.ngModel[name] | json}}-->\n            <xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>\n            <!--<pre>{{vm[vm.config.formName] || \'form\'  | json }}</pre>-->\n            <!--{{field}}-->\n            <xos-validation field="vm[vm.config.formName || \'form\'][name]" form = "vm[vm.config.formName || \'form\']"></xos-validation>\n            <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>\n          </div>\n          <div class="form-group" ng-if="vm.config.actions">\n            <!--<pre>{{vm.config.feedback}} | json</pre>-->\n\n          <xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>\n\n            <button role="button" href=""\n              ng-repeat="action in vm.config.actions"\n              ng-click="action.cb(vm.ngModel, vm[vm.config.formName || \'form\'])"\n              class="btn btn-{{action.class}}"\n              title="{{action.label}}">\n              <i class="glyphicon glyphicon-{{action.icon}}"></i>\n              {{action.label}}\n            </button>\n          </div>\n        </form>\n      ',
       bindToController: true,
       controllerAs: 'vm',
       controller: ["$scope", "$log", "_", "XosFormHelpers", function controller($scope, $log, _, XosFormHelpers) {
@@ -1312,16 +1312,25 @@
 
         this.formField = [];
         $scope.$watch(function () {
+          return _this.config;
+        }, function () {
+
+          if (!_this.ngModel) {
+            return;
+          }
+          var diff = _.difference(Object.keys(_this.ngModel), _this.excludedField);
+          var modelField = XosFormHelpers.parseModelField(diff);
+          _this.formField = XosFormHelpers.buildFormStructure(modelField, _this.config.fields, _this.ngModel);
+        }, true);
+
+        $scope.$watch(function () {
           return _this.ngModel;
         }, function (model) {
-
           // empty from old stuff
           _this.formField = {};
-
           if (!model) {
             return;
           }
-
           var diff = _.difference(Object.keys(model), _this.excludedField);
           var modelField = XosFormHelpers.parseModelField(diff);
           _this.formField = XosFormHelpers.buildFormStructure(modelField, _this.config.fields, model);
@@ -1477,7 +1486,7 @@
           throw new Error('[xosField] Please provide an ng-model');
         }
         if (this.field.type === 'select' && !this.ngModel) {
-          this.ngModel = this.field.options[0].id;
+          //this.ngModel = this.field.options[0].id;
         }
         this.getType = XosFormHelpers._getFieldFormat;
         this.formatLabel = LabelFormatter.format;
@@ -2344,6 +2353,25 @@
   angular.module('xos.helpers')
   /**
   * @ngdoc service
+  * @name xos.helpers.Images
+  * @description Angular resource to fetch /api/core/images/
+  **/
+  .service('Images', ["$resource", function ($resource) {
+    return $resource('/api/core/images/:id/', { id: '@id' }, {
+      update: { method: 'PUT' }
+    });
+  }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Images.js.map
+
+'use strict';
+
+(function () {
+  'use strict';
+
+  angular.module('xos.helpers')
+  /**
+  * @ngdoc service
   * @name xos.helpers.Flavors
   * @description Angular resource to fetch /api/core/flavors/:id/
   **/