title: Observables in Angularjs
body: <p>I'm doing few exercises to understand how Angularjs work... but I'm a bit confused at the moment...</p>
  
  <p>Following the API, various documentation and tutorials I cannot find exactly what I would like to see...</p>
  
  <p>So I created a small JsFiddle: <a href="http://jsfiddle.net/8HqnZ/" rel="nofollow">http://jsfiddle.net/8HqnZ/</a></p>
  
  <p>What I'm doing is really basic... and probably I'm also doing in a bad way... but I'm learning and every tips will be fantastic for me.</p>
  
  <p>My target here is:</p>
  
  <p>Make everything dynamic... obviously.</p>
  
  <ol>
  <li>I don't understand why if I change name or date on my inputs on top my red bars do not update (seems like it isn't observable...)</li>
  <li>I also created a get data button to see my updated Json but it return just <code>[object, Object]</code>...</li>
  </ol>
  
  <p>In plus after I understand these two things I would like to make it inverse as well... I mean something like a draggable red bars that will update date on top... (if it is possible).</p>
  
  <p>Here is my small app:</p>
  
  <pre><code>function App($scope) {
          $scope.windows = [
              {"name":"First Window","from":"2013-11-05","to":"2013-11-21"},
              {"name":"Second","from":"2013-11-10","to":"2013-11-30"},
              {"name":"Another One","from":"2013-11-17","to":"2013-11-20"}
          ];
  
          $scope.addWindow = function() {
              $scope.windows.push({"name":"insert name","from":"2013-11-01","to":"2013-11-02"});
          };
  
          $scope.setWindow = function(from, to) {
              var f = (from.split("-")[2]) * 40,
                  t = ((to.split("-")[2]) * 40) - f;
  
              return { f: f, t: t };
          };
  
  
  
          $scope.getData = function() {
              console.log($scope.windows);
          };
  
      };
  </code></pre>
  
  <p>The HTML looks like this (I cutted off the "calendar"):</p>
  
  <pre><code>&lt;div ng-app ng-controller="App"&gt;
  
      &lt;section id="window-data"&gt;
          &lt;div ng-repeat="window in windows"&gt;
              &lt;label&gt;Name:&lt;input value="{{window.name}}"&gt;&lt;/label&gt; &lt;label&gt;From:&lt;input type="date" value="{{window.from}}"&gt;&lt;/label&gt; &lt;label&gt;To:&lt;input type="date" value="{{window.to}}"&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;button id="add-window" ng-click="addWindow()"&gt;Add Window&lt;/button&gt;
      &lt;/section&gt;
  
      &lt;section id="window-display"&gt;
          &lt;div id="date-labels"&gt;
              &lt;div class="block"&gt;
                  &lt;span class="rotate"&gt;2013-11-01&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="block"&gt;
                  &lt;span class="rotate"&gt;2013-11-02&lt;/span&gt;
              &lt;/div&gt;
              ...
          &lt;/div&gt; 
  
          &lt;div id="windows"&gt;
              &lt;div class="window-container" ng-repeat="window in windows"&gt;
                  &lt;span class="window" style="left:{{setWindow(window.from, window.to).f}}px; width:{{setWindow(window.from, window.to).t}}px"&gt;{{window.name}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
  
      &lt;button id="get-data" ng-click="getData()"&gt;Get Data&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Please if you know good websites with easy and deep documentation, examples, etc... share it with me.</p>