Angularjs 中的可观察量

我正在做一些练习来了解Angularjs是如何工作的......但我现在有点困惑...

遵循 API、各种文档和教程，我无法准确找到我想看到的内容......

所以我创建了一个小的JsFiddle：http://jsfiddle.net/8HqnZ/

我正在做的真的很基本...可能我也做得不好...但我正在学习，每个技巧对我来说都很棒。

我的目标是：

让一切动态...明显地。

1. 我不明白为什么如果我更改顶部输入的名称或日期，我的红条不会更新（似乎无法观察到......
2. 我还创建了一个获取数据按钮来查看我更新的 Json，但它返回的只是[object, Object]......

在我理解这两件事之后，我也想让它反转......我的意思是像可拖动的红色条一样的东西，它会更新顶部的日期......（如果可能的话）。

这是我的小应用程序：

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);
        };
    };

HTML 看起来像这样（我切断了"日历"）：

<div ng-app ng-controller="App">
    <section id="window-data">
        <div ng-repeat="window in windows">
            <label>Name:<input value="{{window.name}}"></label> <label>From:<input type="date" value="{{window.from}}"></label> <label>To:<input type="date" value="{{window.to}}"></label>
        </div>
        <button id="add-window" ng-click="addWindow()">Add Window</button>
    </section>
    <section id="window-display">
        <div id="date-labels">
            <div class="block">
                <span class="rotate">2013-11-01</span>
            </div>
            <div class="block">
                <span class="rotate">2013-11-02</span>
            </div>
            ...
        </div> 
        <div id="windows">
            <div class="window-container" ng-repeat="window in windows">
                <span class="window" style="left:{{setWindow(window.from, window.to).f}}px; width:{{setWindow(window.from, window.to).t}}px">{{window.name}}</span>
            </div>
        </div>
    </section>
    <button id="get-data" ng-click="getData()">Get Data</button>
</div>

如果您知道具有简单而深入的文档，示例等的好网站，请与我分享。