It seems the meaning of your question is a bit unclear, and unfortunately I do not have a Rappid license to test the UI Inspector feature. However, based on my understanding...
...if you enhance a shape's prototype with a property, you can then easily bind data to it in Angular and see the changes reflected in the shape automatically.
I suspect that this will also update the inspector cell, although I am unable to verify this due to lack of a Rappid license.
By adding a 'name' property to a shape like so:
Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
get: function () { return this.attr('text/text'); },
set: function (value) { this.attr('text/text', value); }
});
You can expose the editable element on your controller's scope and bind it accordingly. The HTML structure:
<div ng-app>
<div ng-controller="MyCtrl">
<div id="paper"/>
<div>
<label>Enter text:</label>
<input type="text" ng-model="element.name" />
</div>
</div>
</div>
The controller code:
function MyCtrl($scope) {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
var element = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
attrs: { text: { text: 'edit my name' } },
size: { height: 92.7051, width: 150 }
});
$scope.element = element;
graph.addCell(element);
Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
get: function () { return this.attr('text/text'); },
set: function (value) { this.attr('text/text', value); }
});
}
View the working jsfiddle here: http://jsfiddle.net/r7n9t9s6/3/