UI-router with multiple views

I am trying to lea the UI-Routing in AngularJS

I have two views. 1> The default and 2> When a button is clicked.

I have edited my code to use multiple views, however that doesn't seem to work. I am sure the code is not perfect but I cant find it.

Any help will be appreciated.

Code:

HTML(index)

I have stacked all of my business in a single controller for the time being.

<div class="chaels" ng-controller = "MainController">

  <div class="container-fluid">
    <div class="row-fluid">

      <div class="col-xs-4">
        <div class="container2">
          <div class="chael_title container_title"> Chaels </div>
            <chael-tab
              ........
            </chael-tab>
        </div>
      </div>

      <div class="col-xs-4" >
        <div class="container3">
          <div class="source_title container_source"> Sources </div>
          <div ui-view='DefaultSources' ></div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="container4">
          <div class="keyword_title container_keyword"> Keywords </div>
          <div ui-view='DefaultKeywords'></div>
        </div>
      </div>

    </div>
  </div>

Route

angular.module('myApp').config(["$stateProvider", "$httpProvider", "$urlRouterProvider", function($stateProvider,$httpProvider,$urlRouterProvider){

$urlRouterProvider.otherwise('/');
$stateProvider.state('One',{
    views: {
      'DefaultSources@One':{
        url:'/Default_View',
        templateUrl:'/static/app/recommender_service/template/default_sources.html'
      },
      'DefaultKeywords@One':{
        url:'/Default_View',
        templateUrl:'/static/app/recommender_service/template/default_keyword.html'
      }
    }
})
}]).run(["$state", "$rootScope", function($state, $rootScope){
$rootScope.$state = $state;
}]);