Angular JS - Control multiple views based on click

Question

There is my router.js

$stateProvider.state("workarea", {
  url: "/",
  templateUrl: "/templates/workarea.html",
  requireLogin: true
}).state("workarea.shared", {
  url: "/workarea",
  controller: "workareaSharedCtrl",
  requireLogin: true,
  views: {
    "options": {
      templateUrl: "/views/options.html"
    },
    "workspace": {
      templateUrl: "/views/workspace.html"
    }
  }
}).state("workarea.user", {
  url: "/:username",
  controller: "workareaUserCtrl",
  requireLogin: true,
  views: {
    "options": {
      templateUrl: "/views/options.html"
    },
    "workspace": {
      templateUrl: "/views/workspace.html"
    },
    "comments": {
      templateUrl: "/views/comments.html"
    }
  }
})

This is the /templates/workarea.html

<a ui-sref="workarea.shared">Shared</a>
<a ui-sref="workarea.user">Private</a>
<div ui-view="options" />
<div ui-view="workspace" />

When clicked on Shared, the views (options, workspace and comments) of workarea.shared should be loaded and when clicked on Private the views (options, workspace) of workarea.user should be loaded.

What am I missing here?

Answer 1

There is a working version

There are two issues. Firstly, <div> cannot be self closing, so this is a fix of the parent template

<div>      
  <a ui-sref="workarea.shared">Shared</a>
  <a ui-sref="workarea.user">Private</a>
  <!--
  <div ui-view="options" />
  <div ui-view="workspace" />
  -->
  <div ui-view="options" ></div>
  <div ui-view="workspace" ></div>
</div>

Also, controller belongs to view (even to each of them if more defined) not to state:

...
.state("workarea.shared", {
      url: "/workarea",
      // NOT here - controller belongs to view
      //controller: "workareaSharedCtrl",
      requireLogin: true,
      views: {
        "options": {
          templateUrl: "views/options.html",
          controller: "workareaSharedCtrl",   // here should be definition 
        },
        ...

Check it here