title: AngularJs Passing complex data to directive
body: <p>I have the following directive:</p>
  
  <pre><code>&lt;div teamspeak details="{{data.details}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>this is the object structure:</p>
  
  <pre><code>data: {
                  details: {
                      serverName: { type: 'text', value: 'my server name' },
                      port: { type: 'number', value: 'my port' },
                      nickname: { type: 'text' },
                      password: { type: 'password' },
                      channel: { type: 'text' },
                      channelPassword: { type: 'password' },
                      autoBookmarkAdd: { type: 'checkbox' }
                  }
  }
  </code></pre>
  
  <p>and I want it to generate a link based on the data inside the <code>data.details</code> object. 
  <strong>Unfortunately it doesn't work since somehow I cann't access any inner values of the <code>details</code> object</strong>, but if I am passing it a simple data structure like:</p>
  
  <pre><code>&lt;div teamspeak details="{{data.details.serverName.value}}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I can access it by using <code>{{details}}</code>.</p>
  
  <p><strong>Here is my Directive Code:</strong></p>
  
  <pre><code>App.directive('teamspeak', function () {
      return {
          restrict: 'A',
          template: "&lt;a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'&gt;Teamspeak Server&lt;/a&gt;",
          scope: {
              details: '@details',
          },
          link: function (scope, element, attrs) {
          }
      };
  });
  </code></pre>
  
  <p>Thanks</p>