I have the following plunker attached herewith
$scope.fetchList = ["ActionScript","AppleScript","Asp","BASIC","C"];
I forked your plunk here
Here's how I addressed your issues:
I just wrapped your elements in div's
<div> <div> <br> Select name: <autocomplete placeholder="Enter sedol" style="width:29%" selection="selection" source="fetchList" /> </div> <div> <br> Given Data1: <input type="text" readonly> </div> <div> <br> Given Data2: <input type="text" readonly> </div> </div>
You hade the save an cancel functions declared in the parent controller rather than the controller for the modal, so I moved it.
I don't understand the issue. fetchList() already returns an array albeit an array of objects rather than an array of strings. Changing it to an array of string breaks all sorts of code in your directive.