Since you're planning to reuse the element, a directive does make sense.
Based on what you've described, I imagine it could be organized like so:
directive('mySearch', function(Item){
return {
restrict: 'E',
// if you want to show results somewhere outside of the directive, you need
// to set a two-way binding variable to pass up the scope chain
scope: {},
link: function(scope, elem, attrs) {
scope.search = function(query){
Item.search(query).then(function(results){
scope.results = results.data;
});
};
},
// template contains search button.. could also contain ng-repeat for
// results -- it depends on how/where you want to display the results
templateUrl: 'my-template.html'
}
})
.factory('Item', function($http){
var item = {};
// this factory manages your item data in general, including searches
item.search = function(query){
// perform ajax search w/ $http
};
return item;
})
... but your mileage may vary based on exactly what you're trying to accomplish. Generally speaking, in addition to using directives for reusable components, you should also use services to handle your data (including AJAX queries).