Two Way binding is most important part of Atoms.js Framework, which makes it very easy to update the data dynamically without writing any JavaScript. Binding framework automatically updates any relative one way binding and updates the changes throughout the page.
In above example, there is a toggle button bar, which displays list of items and one can be selected. Binding expression atom-selected-item is written with $ prefix, which makes this expression as two way binding, which means any time either side expression is modified, other will be updated at the same time. Here, whenever selected item will be changed by user (by clicking and changing the default selected item of Toggle Button Bar), this binding expression will save selected item as selection named property in scope.
So, whenever $[scope.selection] will be updated by atom-selected-item by user interaction, other elements bound to $scope.selection will be updated automatically.
By default, two way binding is updated on "change" event of HTML Element. This is done to improve performance, however if you want binding to be updated on every keyboard event, then you can use ^ instead of $. Or you can specify comma separated event names in bracket after the binding expression as shown below.