I am new to Umbraco and currently following the tutorial on integrating services with a property editor on the Belle site:

https://umbraco.github.io/Belle/#/tutorials/Intergrating-Services-With-PropertyEditor

I've injected the service in my controller and hooked onto the insertImageDialog event from the external library.

Currently my HTML looks like this:

<div ng-controller="My.MarkdownEditorController" class="wmd-panel">
<div id="wmd-button-bar-{{model.alias}}">
    <textarea ng-model="model.value" class="wmd-input" id="wmd-input-{{model.alias}}"> <!--Value is auto-synced to content object-->
        your content
    </textarea>
    <div id="wmd-preview-{{model.alias}}" class="wmd-panel wmd-preview"></div>
</div>

The tutorial talks about using the media picker with the dialog service, but how do I display the button in the HTML?

This is my JS code that hooks into the event and triggers the media picker dialog:

editor2.hooks.set("insertImageDialog", function (callback) {     
                dialogService.mediaPicker({ 
                    callback: function(data) {                             
                        $(data.selection).each(function (i, item) { 
                            var imagePropVal = imageHelper.getImagePropertyValue({ imageModel: item, scope: $scope });
                            callback(imagePropVal);
                            $log.log(item); 
                        });
                    }
                }); //end media picker
                return true;
            });