angular ui-router content not showing

Question

hello i am trying to generate states dynamically:

this is my js:

    var $urlRouterProviderRef = null;
    var $stateProviderRef = null;
    angular.module('acadb', [   


      'ui.router',
      'ui.bootstrap',
      'flow',
      'acadb.controllers',
      'acadb.services',
      'acadb.filters',
      'acadb.directives',
      'xeditable',
      'ngResource',

    ])

    .config(function($locationProvider,$stateProvider, $urlRouterProvider) {

    $urlRouterProviderRef = $urlRouterProvider;

    $locationProvider.html5Mode(false);
    $stateProviderRef = $stateProvider;


    }).run(['$q', '$rootScope', '$state', '$http','$stateParams',function ($q,         $rootScope, $state, $http, $stateParams) 
  {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $http.get("/columns/user")
    .success(function(data)
    {
        var data = [{
              "name": "form",
              "url": "/form",
              "controller": 'formController',
              "parent": "",
              "abstract": false,
              "templateUrl": '../partials/form/form.html',
              "views": [{
                "name": "personalInfo",
                "url": '/personalInfo',
                "templateUrl": '../partials/form/personalInfo.html'
              }, {
                "name": "education",
                "url": '/education',
                "templateUrl": '../partials/form/education.html'
              }]
            }];

      angular.forEach(data, function (value, key) 
      { 
          var state = {
            "templateUrl":value.templateUrl,
            "url": value.url,
            "parent" : value.parent,
            "controller": value.controller ,
            "abstract": value.abstract,
            "views": {}
          };
            console.log(state);
          angular.forEach(value.views, function (view) 
          {
            state.views[view.name] = {
              templateUrl : view.templateUrl,
              name: value.name+'.'+view.name
            };
          });

          $stateProviderRef.state(value.name, state);
          //console.log( $stateProviderRef.state(value.name, state));
      });
      $state.go("form");    
    });

}]);

and in my main HTML:

<div ui-view=""></div>

form.html:

<form id="signup-form" ng-submit="processForm()
        <div id="form-views" ui-view=""></div>
</form>

but for some reason the content doesnt show at all. i can eve see in the inspector that all the partials arrived correctly.

what am i missing?

just for refference- this is a non-dynamic state config that is working just fine:

  // .state('form', {
            // url: '/form',
            // templateUrl: '../partials/form/form.html',
            // controller: 'formController'
        // })
//         
        // // nested states 
        // // each of these sections will have their own view
        // // url will be nested (/form/profile)
        // .state('form.personalInfo', {
            // url: '/personalInfo',
            // templateUrl: '../partials/form/personalInfo.html'
        // })
//         
        // // url will be /form/interests
        // .state('form.education', {
            // url: '/education',
            // templateUrl: '../partials/form/education.html'
        // })
//         
        // // url will be /form/payment
        // .state('form.skills', {
            // url: '/skills',
            // templateUrl: '../partials/form/skills.html'
        // });
//         
    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/form/personalInfo');