images/docs/guide/concepts.svg/databinding1.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 756 553" width="63pc" height="553pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2013-11-06 19:46:59 +0000</dc:date></metadata><defs><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in"/></filter><font-face font-family="Arial" font-size="11" panose-1="2 11 7 4 2 2 2 2 2 4" units-per-em="1000" underline-position="-105.95703" underline-thickness="104.98047" slope="0" x-height="518.5547" cap-height="715.8203" ascent="905.27344" descent="-211.91406" font-weight="bold"><font-face-src><font-face-name name="Arial-BoldMT"/></font-face-src></font-face><font-face font-family="Courier" font-size="11" units-per-em="1000" underline-position="-178.22266" underline-thickness="57.617188" slope="0" x-height="462.40234" cap-height="594.72656" ascent="753.90625" descent="-246.09375" font-weight="500"><font-face-src><font-face-name name="Courier"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -3 5 6" markerWidth="5" markerHeight="6" color="navy"><g><path d="M 2.8799995 0 L 0 -1.0799998 L 0 1.0799998 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>databinding1</title><rect fill="white" width="756" height="553"/><g><title>Layer 1</title><g><xl:use xl:href="#id42_Graphic" filter="url(#Shadow)"/><xl:use xl:href="#id64_Graphic" filter="url(#Shadow)"/></g><path d="M 182.79184 178.54641 L 393.12518 178.54641 C 401.40945 178.54641 408.12518 185.26214 408.12518 193.54641 L 408.12518 306.30595 C 408.12518 314.59022 401.40945 321.30595 393.12518 321.30595 L 182.79184 321.30595 C 174.50757 321.30595 167.79184 314.59022 167.79184 306.30595 L 167.79184 193.54641 C 167.79184 185.26214 174.50757 178.54641 182.79184 178.54641 Z" fill="#d7a5a5" fill-opacity=".75"/><path d="M 182.79184 178.54641 L 393.12518 178.54641 C 401.40945 178.54641 408.12518 185.26214 408.12518 193.54641 L 408.12518 306.30595 C 408.12518 314.59022 401.40945 321.30595 393.12518 321.30595 L 182.79184 321.30595 C 174.50757 321.30595 167.79184 314.59022 167.79184 306.30595 L 167.79184 193.54641 C 167.79184 185.26214 174.50757 178.54641 182.79184 178.54641 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(172.79184 183.54641)" fill="black"><tspan font-family="Arial" font-size="11" font-weight="bold" x="0" y="10" textLength="33.010742">Scope</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="35.359863" textLength="52.808594"> cost:1</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="48.359863" textLength="59.409668"> qty:2.5</tspan></text><path d="M 184.375 205.875 L 231.875 205.875 C 237.39785 205.875 241.875 210.35215 241.875 215.875 L 241.875 229.625 C 241.875 235.14785 237.39785 239.625 231.875 239.625 L 184.375 239.625 C 178.85215 239.625 174.375 235.14785 174.375 229.625 L 174.375 215.875 C 174.375 210.35215 178.85215 205.875 184.375 205.875 Z" stroke="#f3ea90" stroke-opacity=".87" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.125" stroke-dasharray="4,4"/><path d="M 266.29239 238.50893 L 476.62573 238.50893 C 484.91 238.50893 491.62573 245.22466 491.62573 253.50893 L 491.62573 366.26847 C 491.62573 374.55274 484.91 381.26847 476.62573 381.26847 L 266.29239 381.26847 C 258.00812 381.26847 251.29239 374.55274 251.29239 366.26847 L 251.29239 253.50893 C 251.29239 245.22466 258.00812 238.50893 266.29239 238.50893 Z" fill="#b1d6a2" fill-opacity=".75"/><path d="M 266.29239 238.50893 L 476.62573 238.50893 C 484.91 238.50893 491.62573 245.22466 491.62573 253.50893 L 491.62573 366.26847 C 491.62573 374.55274 484.91 381.26847 476.62573 381.26847 L 266.29239 381.26847 C 258.00812 381.26847 251.29239 374.55274 251.29239 366.26847 L 251.29239 253.50893 C 251.29239 245.22466 258.00812 238.50893 266.29239 238.50893 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" stroke-dasharray="4,4"/><text transform="translate(256.29239 243.50893)" fill="black"><tspan font-family="Arial" font-size="11" font-weight="bold" x="0" y="10" textLength="7.336914">V</tspan><tspan font-family="Arial" font-size="11" font-weight="bold" x="7.1381836" y="10" textLength="53.77539">iew (DOM)</tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="35.359863" textLength="33.005371"><div></tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="48.359863" textLength="158.42578"> <input ng-model="qty"></tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="61.359863" textLength="165.02686"> <input ng-model="cost"></tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="74.359863" textLength="158.42578"> Total: {{qty * cost}} </tspan><tspan font-family="Courier" font-size="11" font-weight="500" x="0" y="87.359863" textLength="39.606445"></div></tspan></text><path d="M 338.66667 281.50008 C 336.81286 230.05682 285.27899 228.00382 245.90103 227.90494" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 366 296 C 367.83281 220.24375 283.62816 215.97367 245.90456 215.78915" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id42_Graphic"><path d="M 318.854 175.29683 C 318.854 163.7294 291.57583 154.37492 257.8645 154.37492 C 224.15316 154.37492 196.875 163.7294 196.875 175.29683 C 196.875 185.15446 216.88687 193.45267 243.74909 195.61515 C 241.54493 199.33707 237.91239 203.71251 232.19402 205.875 C 243.21238 205.875 254.11242 200.74508 261.5568 196.16827 C 293.54091 195.51473 318.854 186.41158 318.854 175.29683 Z" fill="#f3ea91"/><path d="M 318.854 175.29683 C 318.854 163.7294 291.57583 154.37492 257.8645 154.37492 C 224.15316 154.37492 196.875 163.7294 196.875 175.29683 C 196.875 185.15446 216.88687 193.45267 243.74909 195.61515 C 241.54493 199.33707 237.91239 203.71251 232.19402 205.875 C 243.21238 205.875 254.11242 200.74508 261.5568 196.16827 C 293.54091 195.51473 318.854 186.41158 318.854 175.29683 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(215.17185 162.09994)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="26.35085" y="11" textLength="32.683594">Model</tspan></text></g><path d="M 183.83369 229.47369 C 140.47126 233.35689 154.59821 310.4773 252.44329 316.80758" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M 183.83369 216.31579 C 140.47017 220.19909 154.59892 309.72463 252.45067 316.7751" marker-end="url(#FilledArrow_Marker)" stroke="navy" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g id="id64_Graphic"><path d="M 104.625 328.70317 C 104.625 340.2706 131.90316 349.62508 165.6145 349.62508 C 199.32583 349.62508 226.604 340.2706 226.604 328.70317 C 226.604 318.84554 206.59212 310.54733 179.72991 308.38485 C 181.93407 304.66293 185.5666 300.28749 191.28498 298.125 C 180.26661 298.125 169.36657 303.25492 161.92219 307.83173 C 129.93808 308.48527 104.625 317.58842 104.625 328.70317 Z" fill="#f3ea91"/><path d="M 104.625 328.70317 C 104.625 340.2706 131.90316 349.62508 165.6145 349.62508 C 199.32583 349.62508 226.604 340.2706 226.604 328.70317 C 226.604 318.84554 206.59212 310.54733 179.72991 308.38485 C 181.93407 304.66293 185.5666 300.28749 191.28498 298.125 C 180.26661 298.125 169.36657 303.25492 161.92219 307.83173 C 129.93808 308.48527 104.625 317.58842 104.625 328.70317 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(122.92185 305.85001)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="9.001241" y="25" textLength="67.382812">Data binding</tspan></text></g></g></g></svg>