Number of node data: {{model.nodeDataArray.length}}
Alpha node location: {{model.findNodeDataForKey(1).loc}}
Selected node: {{model.selectedNodeData.key}}
Number of link data: {{model.linkDataArray.length}}

This is an AngularJS v1 sample. For a minimal Angular v4+ project, see the ../projects/angular-basic/ subdirectory.

This defines an AngularJS directive for creating a GoJS Diagram with certain properties. It also sets up a controller holding a GraphLinksModel that is passed to the go-diagram element via the go-model attribute.

Note that the above bindings are updated automatically as the user moves the "Alpha" node, copies or deletes Parts in the Diagram, reconnects the Link from "Alpha" to "Beta", or performs an undo or redo.

You can also replace the Diagram.model just by setting the "model" property on the $scope, since the "goDiagram" directive watches that property for changes.

Please note that the source code shown here for the HTML shows the expanded DIV element produced by AngularJS and other modified elements, not <go-diagram go-model="model" style=...></go-diagram> and { { } } bindings as originally written.